/* ===========================================================================
   INHALT DIESER DATEI

   Eine Datei, und das ist Absicht: die Reihenfolge traegt. Der Isolations-
   Block am Ende muss nach allem anderen kommen, sonst gewinnen Theme und
   Elementor wieder. Solange alles in einer Datei steht, garantiert das die
   Datei selbst — von oben nach unten. Aufteilen wurde geprueft und bewusst
   verworfen (2026-07-28, Begruendung in _project/ZIEL-ARCHITEKTUR.md).

   ZWEI REGELN, die diese Datei tragen:
     1. Eine Eigenschaft, die sich je nach Zustand aendert, darf in einer
        ZUSTANDSLOSEN Regel nie !important sein — sonst wird der Zustand stumm.
        (Genau das machte alle Knoepfe monatelang blind fuer den Mauszeiger.)
     2. Neue !important nur, wenn sie ein FREMDES !important schlagen muessen.
        Gegen blosse Spezifitaet reicht die Ladereihenfolge (Prioritaet 30).

   2026-07-28: 166 tote Regeln entfernt (~26 KB) — zwei Namensschichten aus
   der Zeit vor dem Umbau, die kein Markup mehr ansprach. Gegengeprueft, dass
   keine der 390 lebenden Klassen betroffen war.

   Abgesichert durch _project/harness/hovertest.php + cssaudit.php.

   WEGWEISER:
     Z.42     Farben und Masse (Custom Properties)
     Z.284    Grundlagen: Kasten-Modell, Typografie
     Z.1186   Zinc-Tokens der modernen Oberflaeche
     Z.2762   Kundenseite: Isolation gegen Elementor
     Z.2968   Kundenseite: Objekt-Schublade
     Z.3044   Agenten-Dashboard: Filter
     Z.3106   Dialog: Kunde anlegen / bearbeiten
     Z.3174   Dialog: Abschluss + Google-Bewertung
     Z.3234   Agenten-Dashboard: Tabelle, Chips, Leiste
     Z.3650   Kundenseite: Logo, Hero, Fortschritt
     Z.4018   Kundenliste: Werkzeugleiste
     Z.4136   Oeffentliches Anfrage-Formular
     Z.4321   Anfrage-Formular: Fragen und Karten
     Z.4794   ISOLATION gegen Theme/Elementor  <-- muss ZULETZT bleiben
     Z.5178   Hover-/Fokus-Zustaende der Knoepfe
     Z.6002   Einzelobjekt-Anfrage
   =========================================================================== */

.abc-asl {
	--abc-asl-bg: #fafafa;
	--abc-asl-surface: #fff;
	--abc-asl-ink: #09090b;
	--abc-asl-muted: #71717a;
	--abc-asl-line: #e4e4e7;
	--abc-asl-line-strong: #d4d4d8;
	/* NEAR-BLACK IS THE ACTION COLOUR, ON PURPOSE (Ferenc 2026-07-28).
	   The dark buttons — "Send selection", "Back to customer list", the active
	   tab, the + on a stock row — are meant to read as THE thing to press on
	   that screen. They are neither the theme bleeding through nor a leftover
	   from a reset. Do not "correct" them to a lighter tone in a later pass. */
	--abc-asl-brand: #18181b;
	--abc-asl-brand-dark: #000;
	--abc-asl-good: #059669;
	--abc-asl-maybe: #b45309;
	--abc-asl-no: #3f3f46;
	--abc-asl-accent: #4f7ce0;
	--abc-asl-accent-soft: #edf2fd;
	--abc-asl-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.04);
	color: var(--abc-asl-ink);
	font-family: inherit;
}

/* Final ABC dashboard visual pass, re-tokenised to the shadcn-style zinc
   palette approved in the W1 fine design (2026-07-17). */
.abc-asl {
	--abc-asl-bg: #fafafa;
	--abc-asl-surface: #ffffff;
	--abc-asl-soft: #f4f4f5;
	--abc-asl-ink: #09090b;
	--abc-asl-muted: #71717a;
	--abc-asl-line: #e4e4e7;
	--abc-asl-line-strong: #d4d4d8;
	--abc-asl-brand: #18181b;
	--abc-asl-brand-dark: #000000;
	--abc-asl-good: #059669;
	--abc-asl-maybe: #b45309;
	--abc-asl-no: #3f3f46;
	--abc-asl-danger: #b42318;
	--abc-asl-accent: #4f7ce0;
	--abc-asl-accent-soft: #edf2fd;
	--abc-asl-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.04);
	width: min(1360px, 100%);
	margin: 0 auto;
	padding: 24px clamp(14px, 3vw, 42px) 54px;
	background: var(--abc-asl-bg);
	color: var(--abc-asl-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.45;
}

.abc-asl a {
	color: inherit;
	text-decoration: none;
}


.abc-asl h1 {
	margin: 0;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1;
	letter-spacing: 0;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-agent__hero p:not(.abc-asl-kicker), :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__hero p:not(.abc-asl-kicker) {
	max-width: 680px;
	margin: 8px 0 0;
	color: var(--abc-asl-muted);
	font-size: 14px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-kicker {
	margin: 0 0 5px;
	color: var(--abc-asl-brand);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-panel, :is(.abc-asl, .abc-asl-modern) .abc-asl-login__panel, :is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__items, :is(.abc-asl, .abc-asl-modern) .abc-asl-matching, :is(.abc-asl, .abc-asl-modern) .abc-asl-profile-summary {
	border: 1px solid var(--abc-asl-line);
	border-radius: 8px;
	background: var(--abc-asl-surface);
	box-shadow: var(--abc-asl-shadow);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-panel, :is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__items, :is(.abc-asl, .abc-asl-modern) .abc-asl-matching {
	overflow: hidden;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-panel__head h2, :is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items__head h3, :is(.abc-asl, .abc-asl-modern) .abc-asl-matching__head h3, :is(.abc-asl, .abc-asl-modern) .abc-asl-profile-summary__head h3 {
	margin: 0;
	font-size: 15px;
	line-height: 1.2;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-button, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button {
	min-height: 27px;
	padding: 3px 8px;
	border: 1px solid var(--abc-asl-line-strong);
	border-radius: 5px;
	background: var(--abc-asl-surface);
	color: var(--abc-asl-ink);
	font-size: 13px;
	font-weight: 500;
	transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-button:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-button:focus-visible, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button:focus-visible {
	border-color: var(--abc-asl-brand);
	color: var(--abc-asl-brand);
	outline: none;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary {
	border-color: var(--abc-asl-brand);
	background: var(--abc-asl-brand);
	color: #ffffff;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary:focus-visible {
	border-color: var(--abc-asl-brand-dark);
	background: var(--abc-asl-brand-dark);
	color: #ffffff;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-list-nav__item:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-list-nav__item.is-active {
	background: color-mix(in srgb, var(--abc-asl-brand) 7%, transparent);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-list-nav__item strong {
	font-size: 14px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-list-nav__item span, :is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items__head span, :is(.abc-asl, .abc-asl-modern) .abc-asl-matching__head p, :is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid span, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary span, :is(.abc-asl, .abc-asl-modern) .abc-asl-match-property small {
	color: var(--abc-asl-muted);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid > div, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary > div {
	border: 0;
	border-right: 1px solid var(--abc-asl-line);
	border-radius: 0;
	background: transparent;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid > div:last-child, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary > div:last-child {
	border-right: 0;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table th, :is(.abc-asl, .abc-asl-modern) .abc-asl-match-table td {
	padding: 11px 12px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tbody tr:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tr.is-added {
	background: color-mix(in srgb, var(--abc-asl-brand) 7%, transparent);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item {
	padding: 14px 16px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item {
	grid-template-columns: 92px minmax(0, 1fr) 104px auto;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item {
	grid-template-columns: 150px minmax(0, 1fr) 300px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb {
	border-radius: 6px;
	background: var(--abc-asl-soft);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-status--good, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="good"] {
	border-color: var(--abc-asl-good);
	background: color-mix(in srgb, var(--abc-asl-good) 10%, #fff);
	color: var(--abc-asl-good);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-status--maybe, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="maybe"] {
	border-color: var(--abc-asl-maybe);
	background: color-mix(in srgb, var(--abc-asl-maybe) 12%, #fff);
	color: var(--abc-asl-maybe);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-status--no, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="no"] {
	border-color: var(--abc-asl-no);
	background: #f4f4f5;
	color: var(--abc-asl-no);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-dialog {
	border-radius: 8px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-customer__footer {
	border-radius: 8px;
	background: var(--abc-asl-surface);
	box-shadow: var(--abc-asl-shadow);
}

@media (max-width: 1080px) {
	:is(.abc-asl, .abc-asl-modern) .abc-asl-agent__grid, :is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.abc-asl {
		padding: 16px 12px 42px;
	}

	

	.abc-asl h1 {
		font-size: clamp(30px, 12vw, 44px);
	}

	

	:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid > div, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary > div {
		border-right: 0;
		border-bottom: 1px solid var(--abc-asl-line);
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid > div:last-child, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary > div:last-child {
		border-bottom: 0;
	}
}

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

:is(.abc-asl, .abc-asl-modern) .abc-asl-copy-feedback {
	position: fixed;
	z-index: 1000;
	right: 20px;
	bottom: 20px;
	width: min(330px, calc(100vw - 40px));
	padding: 10px 12px;
	border: 1px solid var(--abc-asl-line-strong);
	border-radius: 7px;
	background: var(--abc-asl-ink);
	box-shadow: 0 12px 30px rgba(28, 27, 25, 0.2);
	color: #fff;
	font-size: 12px;
	line-height: 1.35;
	opacity: 0;
	transform: translateY(8px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-copy-feedback.is-visible {
	opacity: 1;
	transform: translateY(0);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-kicker {
	margin: 0 0 5px;
	color: var(--abc-asl-brand);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.abc-asl h1, .abc-asl h2, .abc-asl h3, .abc-asl p {
	margin-top: 0;
}

.abc-asl h1 {
	margin-bottom: 8px;
	font-size: clamp(32px, 5vw, 52px);
	line-height: 1;
	letter-spacing: 0;
}

.abc-asl-login {
	width: min(460px, 100%);
	margin: 42px auto;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-login__panel {
	padding: clamp(22px, 4vw, 34px);
	border: 1px solid var(--abc-asl-line);
	border-radius: 8px;
	background: var(--abc-asl-surface);
	box-shadow: var(--abc-asl-shadow);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-login__panel > p:not(.abc-asl-kicker) {
	margin-bottom: 22px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-login-form {
	display: grid;
	gap: 14px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-login-form > label {
	display: grid;
	gap: 5px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-login-form > label > span {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-login-form__remember {
	display: flex;
	align-items: center;
	gap: 8px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-login-form__remember input {
	width: 16px;
	min-height: 16px;
	margin: 0;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-login-form__remember span {
	font-size: 14px !important;
	font-weight: 400 !important;
	text-transform: none !important;
}

/* Harden the login form against theme / Elementor global input + button styles
   bleeding in — the login page is a normal front-end page, so without these
   resets the fields and button pick up the theme's global form styling.

   `border` and `box-shadow` deliberately carry NO !important: the :focus rule
   below wants to paint a blue border and a soft ring, and a state-less
   !important would have made that impossible — the same defect that left the
   dashboard buttons unresponsive. The selector is 0-3-1 and already out-weighs
   an Elementor kit's `input[type="text"]`, so nothing is lost by asking nicely. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-login-form input[type="text"], :is(.abc-asl, .abc-asl-modern) .abc-asl-login-form input[type="password"] {
	width: 100% !important;
	margin: 0 !important;
	padding: 11px 13px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: var(--abc-asl-ink) !important;
	background: var(--abc-asl-surface) !important;
	border: 1px solid var(--abc-asl-line-strong, #d4d4d8);
	border-radius: 8px !important;
	box-shadow: none;
	-webkit-appearance: none !important;
	appearance: none !important;
	box-sizing: border-box !important;
	min-height: 0 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-login-form input[type="text"]:focus, :is(.abc-asl, .abc-asl-modern) .abc-asl-login-form input[type="password"]:focus {
	outline: none;
	border-color: var(--abc-asl-accent, #4f7ce0);
	box-shadow: 0 0 0 3px var(--abc-asl-accent-soft, #edf2fd);
}
.abc-asl-login .abc-asl-button--primary {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 4px 0 0;
	padding: 12px 18px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	background: var(--abc-asl-brand, #18181b);
	border: 0;
	border-radius: 8px;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.abc-asl-login .abc-asl-button--primary:hover {
	background: var(--abc-asl-brand-dark, #000);
}

.abc-asl h2 {
	margin-bottom: 0;
	font-size: 22px;
	line-height: 1.2;
}

.abc-asl h3 {
	margin-bottom: 5px;
	font-size: 17px;
	line-height: 1.25;
}

.abc-asl p, .abc-asl span, .abc-asl label span {
	color: var(--abc-asl-muted);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-actions-menu summary {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--abc-asl-line-strong);
	border-radius: 8px;
	background: #fff;
	color: var(--abc-asl-ink);
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	list-style: none;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-actions-menu summary::-webkit-details-marker {
	display: none;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-actions-menu > div {
	position: absolute;
	z-index: 3;
	top: calc(100% + 6px);
	right: 0;
	min-width: 170px;
	padding: 5px;
	border: 1px solid var(--abc-asl-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(42, 34, 28, 0.14);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-actions-menu > div button {
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 5px;
	background: transparent;
	color: var(--abc-asl-ink);
	cursor: pointer;
	font: inherit;
	text-align: left;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-actions-menu > div form {
	margin: 0;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-actions-menu > div button:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-actions-menu > div button:focus-visible {
	background: var(--abc-asl-bg);
	outline: none;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-form {
	display: grid;
	gap: 10px;
	margin-bottom: 18px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-dialog {
	width: min(760px, calc(100vw - 28px));
	max-height: min(860px, calc(100vh - 28px));
	padding: 0;
	border: 1px solid var(--abc-asl-line-strong);
	border-radius: 8px;
	background: var(--abc-asl-surface);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.2);
	color: var(--abc-asl-ink);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-dialog::backdrop {
	background: rgba(28, 27, 25, 0.46);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-dialog__head .abc-asl-kicker {
	margin-bottom: 4px;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-icon-button {
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid var(--abc-asl-line);
	border-radius: 6px;
	background: #fff;
	color: var(--abc-asl-ink);
	cursor: pointer;
	font-size: 24px;
	line-height: 1;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-fieldset legend {
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 700;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-form label, :is(.abc-asl, .abc-asl-modern) .abc-asl-add-property label {
	display: grid;
	gap: 5px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-form label span, :is(.abc-asl, .abc-asl-modern) .abc-asl-add-property label span {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

.abc-asl input, .abc-asl select, .abc-asl textarea {
	width: 100%;
	min-height: 40px;
	padding: 9px 10px;
	border: 1px solid var(--abc-asl-line-strong);
	border-radius: 8px;
	background: #fff;
	color: var(--abc-asl-ink);
	font: inherit;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-button, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 9px 13px;
	border: 1px solid var(--abc-asl-line-strong);
	border-radius: 8px;
	background: #fff;
	color: var(--abc-asl-ink);
	cursor: pointer;
	font: inherit;
	text-decoration: none;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-button:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-button:focus-visible, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button:focus-visible {
	border-color: var(--abc-asl-brand);
	color: var(--abc-asl-brand);
	outline: none;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary {
	border-color: var(--abc-asl-brand);
	background: var(--abc-asl-brand);
	color: #fff;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary:focus-visible {
	border-color: var(--abc-asl-brand-dark);
	background: var(--abc-asl-brand-dark);
	color: #fff;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-button:disabled {
	opacity: 0.62;
	cursor: wait;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-message {
	margin-bottom: 14px;
	padding: 12px 14px;
	border: 1px solid var(--abc-asl-line);
	border-left: 4px solid var(--abc-asl-brand);
	border-radius: 8px;
	background: #fff;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-message--error {
	border-left-color: var(--abc-asl-no);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-list-nav__item:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-list-nav__item.is-active {
	border-color: var(--abc-asl-line);
	background: color-mix(in srgb, var(--abc-asl-brand) 8%, transparent);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-share-box code {
	overflow-wrap: anywhere;
	color: var(--abc-asl-ink);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid > div, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary > div {
	padding: 12px;
	border: 1px solid var(--abc-asl-line);
	border-radius: 8px;
	background: var(--abc-asl-bg);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid span, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary span {
	display: block;
	margin-bottom: 2px;
	font-size: 12px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid strong, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary strong {
	display: block;
	color: var(--abc-asl-ink);
	font-size: 21px;
	line-height: 1.15;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-deal-summary span, :is(.abc-asl, .abc-asl-modern) .abc-asl-deal-summary strong {
	display: block;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-deal-summary span {
	margin-bottom: 3px;
	color: var(--abc-asl-muted);
	font-size: 12px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-deal-summary b {
	font-size: 21px;
	line-height: 1.15;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-profile-summary__head h3 {
	margin: 0;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-profile-summary__values span, :is(.abc-asl, .abc-asl-modern) .abc-asl-profile-summary__head > span {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 8px;
	border: 1px solid var(--abc-asl-line);
	border-radius: 999px;
	background: #fff;
	color: var(--abc-asl-ink);
	font-size: 13px;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-matching__head h3 {
	margin-bottom: 4px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-matching__head p {
	margin-bottom: 0;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-match-filters label {
	display: grid;
	gap: 5px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-match-filters label span {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table th, :is(.abc-asl, .abc-asl-modern) .abc-asl-match-table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--abc-asl-line);
	text-align: left;
	vertical-align: middle;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table th {
	color: var(--abc-asl-muted);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tr:last-child td {
	border-bottom: 0;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tr.is-added {
	background: color-mix(in srgb, var(--abc-asl-brand) 7%, transparent);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-match-property small {
	display: block;
	margin-top: 2px;
	color: var(--abc-asl-muted);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__items {
	display: grid;
	gap: 0;
	border: 1px solid var(--abc-asl-line);
	border-radius: 8px;
	background: #fff;
	overflow: hidden;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items__head h3, :is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items__head span {
	display: block;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items__head h3 {
	margin: 0 0 2px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items__head span {
	color: var(--abc-asl-muted);
	font-size: 13px;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item {
	display: grid;
	align-items: center;
	gap: 14px;
	padding: 16px;
	border-bottom: 1px solid var(--abc-asl-line);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item {
	grid-template-columns: 112px minmax(0, 1fr) 110px auto;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-contact-details > div {
	display: grid;
	gap: 4px;
	padding: 12px 0;
	border-bottom: 1px solid var(--abc-asl-line);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-contact-details > div:first-child {
	padding-top: 0;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-contact-details > div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-contact-details span {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-contact-details strong, :is(.abc-asl, .abc-asl-modern) .abc-asl-contact-details a, :is(.abc-asl, .abc-asl-modern) .abc-asl-contact-details p {
	margin: 0;
	color: var(--abc-asl-ink);
	font-size: 14px;
	line-height: 1.45;
	word-break: break-word;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item {
	grid-template-columns: 160px minmax(0, 1fr) 330px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item:last-child, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item:last-child {
	border-bottom: 0;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	width: 112px;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: var(--abc-asl-bg);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb--large {
	width: 160px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb span {
	position: absolute;
	top: 7px;
	left: 7px;
	padding: 4px 7px;
	border-radius: 999px;
	background: var(--abc-asl-brand);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="good"] {
	border-color: var(--abc-asl-good);
	background: #e7f3ed;
	color: var(--abc-asl-good);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="maybe"] {
	border-color: var(--abc-asl-maybe);
	background: #fff2db;
	color: var(--abc-asl-maybe);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="no"] {
	border-color: var(--abc-asl-no);
	background: #f4f4f5;
	color: var(--abc-asl-no);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-customer__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding: 12px 14px;
	border: 1px solid var(--abc-asl-line);
	border-radius: 8px;
	background: #fff;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link {
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	text-align: left;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details {
	border-radius: 8px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details:focus-visible, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link:focus-visible {
	outline: 2px solid var(--abc-asl-ink);
	outline-offset: 3px;
}

/* The property title on a customer card. It is a <button> inside the <h2> so it
   can open the detail drawer, and that is why it needed the two wrapping rules
   below: a button does not wrap like a heading. Elementor and Hello set
   `white-space: nowrap` on buttons, so a long title ran off the right edge of
   the card and the overflow simply cut it off — the visitor saw half a name and
   no sign there was more. `overflow-wrap: anywhere` also catches the case a
   plain wrap cannot: one unbroken string longer than the card.
   (Ferenc 2026-07-26: "muss wenn es rechts angelangt ist umbrechen. stand jetzt
   verschwindet es rechts".) */
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link {
	display: block;
	max-width: 100%;
	color: var(--abc-asl-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: left;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-empty {
	margin: 0;
	padding: 16px;
	color: var(--abc-asl-muted);
}

@media (max-width: 1060px) {
	:is(.abc-asl, .abc-asl-modern) .abc-asl-agent__grid, :is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item {
		grid-template-columns: 1fr;
	}

	

	:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb, :is(.abc-asl, .abc-asl-modern) .abc-asl-thumb--large {
		width: 100%;
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 680px) {
	

	

	.abc-asl-customer {
		padding-bottom: 92px;
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button {
		width: auto;
		min-height: 44px;
		padding: 6px 4px;
		font-size: 13px;
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-customer__footer {
		position: fixed;
		z-index: 20;
		bottom: 10px;
		left: 12px;
		right: 12px;
		margin: 0;
		padding: 8px;
		box-shadow: 0 10px 24px rgba(28, 27, 25, 0.22);
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-customer__footer > span {
		display: none;
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-customer__footer .abc-asl-button, :is(.abc-asl, .abc-asl-modern) .abc-asl-button {
		width: 100%;
	}

}

/* Final override: keep the approved clean dashboard look last in cascade. */
.abc-asl {
	width: min(1360px, 100%);
	margin: 0 auto;
	padding: 24px clamp(14px, 3vw, 42px) 54px;
	background: var(--abc-asl-bg);
	color: var(--abc-asl-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.45;
}


.abc-asl h1 {
	margin: 0;
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1;
	letter-spacing: 0;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-panel, :is(.abc-asl, .abc-asl-modern) .abc-asl-login__panel, :is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__items, :is(.abc-asl, .abc-asl-modern) .abc-asl-matching, :is(.abc-asl, .abc-asl-modern) .abc-asl-profile-summary, :is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary {
	border: 1px solid var(--abc-asl-line);
	border-radius: 8px;
	background: var(--abc-asl-surface);
	box-shadow: var(--abc-asl-shadow);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-button, :is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button {
	min-height: 27px;
	padding: 3px 8px;
	border-radius: 5px;
	font-size: 13px;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-list-nav__item:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-list-nav__item.is-active, :is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tbody tr:hover, :is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tr.is-added {
	background: #f1ece6;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid > div, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary > div {
	border: 0;
	border-right: 1px solid var(--abc-asl-line);
	border-radius: 0;
	background: transparent;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid > div:last-child, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary > div:last-child {
	border-right: 0;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item {
	grid-template-columns: 92px minmax(0, 1fr) 104px auto;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item {
	grid-template-columns: 150px minmax(0, 1fr) 300px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb {
	border-radius: 6px;
	background: var(--abc-asl-soft, #ebe5dc);
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tbody tr[draggable="true"] {
	cursor: grab;
	will-change: transform;
	transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.24s cubic-bezier(0.2, 0.82, 0.22, 1);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tbody tr[draggable="true"]:hover {
	box-shadow: inset 3px 0 0 var(--abc-asl-brand);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tbody tr.is-dragging {
	opacity: 0.42;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-match-table tbody tr.is-drag-offset {
	transform: translateY(var(--drag-offset, 0));
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-items.is-saving {
	opacity: 0.8;
}


:is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item.is-arriving {
	animation: abc-asl-arrive 0.38s ease both;
}

.abc-asl-stock-drag-preview {
	position: fixed;
	z-index: 99999;
	left: -999px;
	top: -999px;
	display: grid;
	grid-template-columns: 54px minmax(0, 1fr);
	gap: 10px;
	align-items: center;
	width: 280px;
	padding: 8px;
	border: 1px solid var(--abc-asl-line);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 18px 45px rgba(42, 34, 28, 0.18);
}

.abc-asl-stock-drag-preview img, .abc-asl-stock-drag-preview > span {
	width: 54px;
	height: 42px;
	border-radius: 5px;
	object-fit: cover;
	background: var(--abc-asl-soft, #ebe5dc);
}

.abc-asl-stock-drag-preview strong, .abc-asl-stock-drag-preview span {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.abc-asl-stock-drag-preview span {
	color: var(--abc-asl-muted);
}

@keyframes abc-asl-arrive {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 1080px) {
	:is(.abc-asl, .abc-asl-modern) .abc-asl-agent__grid, :is(.abc-asl, .abc-asl-modern) .abc-asl-agent-item, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.abc-asl {
		padding: 16px 12px 42px;
	}

	

	.abc-asl h1 {
		font-size: clamp(30px, 12vw, 44px);
	}

	

	:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid > div, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary > div {
		border-right: 0;
		border-bottom: 1px solid var(--abc-asl-line);
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-meta-grid > div:last-child, :is(.abc-asl, .abc-asl-modern) .abc-asl-customer__summary > div:last-child {
		border-bottom: 0;
	}
}


/* Modern dashboard reference port — zinc tokens (W1 fine design 2026-07-17).
   CSS-ISOLATION (0.1.47): the ported mockup globals — :root, the universal
   selector, body, a, and the form controls — are scoped onto the plugin roots
   so the plugin styles NOTHING outside its own surfaces, and the theme or
   Elementor styles nothing inside them.

   0.1.57 — DO NOT write the universal selector inside a CSS comment. The old
   wording listed the globals as "(:root/[star]/body/a/inputs)", and the
   slash-star-slash in that list CLOSED THIS COMMENT EARLY. Everything after it
   was then parsed as a selector, which swallowed the whole token block below,
   so `--abc-*` was never defined on .abc-asl — only on .abc-asl-modern. Every
   customer-facing rule using var(--abc-surface) resolved to nothing, which is
   why the "Adjust my search profile" dialog rendered with no background. */
.abc-asl, .abc-asl-modern {
			--abc-bg: #fafafa;
			--abc-surface: #ffffff;
			--abc-ink: #09090b;
			--abc-muted: #71717a;
			--abc-soft: #f4f4f5;
			--abc-line: #e4e4e7;
			--abc-line-strong: #d4d4d8;
			--abc-brand: #18181b;
			--abc-brand-dark: #000000;
			--abc-blue: #4f7ce0;
			--abc-green: #059669;
			--abc-amber: #b45309;
			--abc-red: #3f3f46;
			--abc-danger: #b42318;
			--abc-danger-soft: #fff1f0;
			--abc-green-soft: #ecfdf5;
			--abc-amber-soft: #fffbeb;
			--abc-red-soft: #f4f4f5;
			--abc-accent: #4f7ce0;
			--abc-accent-hover: #3f68c4;
			--abc-accent-fg: #ffffff;
			--abc-accent-soft: #edf2fd;
			--abc-accent-line: #c5d4f6;
			/* Siehe den zweiten Token-Block: Chip-Text braucht 4.5:1 auf dem
			   hellen Tint, die Markenfarbe schafft 3.54:1 / 3.58:1. */
			--abc-accent-ink: #446bc2;
			--abc-green-ink: #04825b;
			--abc-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.04);
		}

		:is(.abc-asl, .abc-asl-modern), :is(.abc-asl, .abc-asl-modern) *, :is(.abc-asl, .abc-asl-modern) *::before, :is(.abc-asl, .abc-asl-modern) *::after {
			box-sizing: border-box;
		}

		.abc-asl-modern {
			color: var(--abc-ink);
			font-family: Arial, Helvetica, sans-serif;
			font-size: 13px;
			line-height: 1.45;
		}

		.abc-asl-modern :is(button, input, select, textarea) {
			font: inherit;
		}

		.abc-asl-modern a {
			color: inherit;
			text-decoration: none;
		}

		

		:is(.abc-asl, .abc-asl-modern) .preview-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 18px;
			padding-bottom: 18px;
			border-bottom: 1px solid var(--abc-line);
		}

		:is(.abc-asl, .abc-asl-modern) .brand {
			display: flex;
			align-items: center;
			gap: 12px;
			min-width: 0;
		}

		:is(.abc-asl, .abc-asl-modern) .brand-mark {
			display: grid;
			place-items: center;
			width: 42px;
			height: 42px;
			border-radius: 50%;
			background: var(--abc-ink);
			color: #fff;
			font-weight: 700;
		}

		:is(.abc-asl, .abc-asl-modern) .brand strong, :is(.abc-asl, .abc-asl-modern) .view-title, :is(.abc-asl, .abc-asl-modern) .client-name, :is(.abc-asl, .abc-asl-modern) .property-title, :is(.abc-asl, .abc-asl-modern) .price, :is(.abc-asl, .abc-asl-modern) .metric strong {
			font-weight: 700;
		}

		:is(.abc-asl, .abc-asl-modern) .brand span, :is(.abc-asl, .abc-asl-modern) .helper, :is(.abc-asl, .abc-asl-modern) .meta, :is(.abc-asl, .abc-asl-modern) .table-head, :is(.abc-asl, .abc-asl-modern) .ref, :is(.abc-asl, .abc-asl-modern) .token, :is(.abc-asl, .abc-asl-modern) .small {
			color: var(--abc-muted);
		}

		:is(.abc-asl, .abc-asl-modern) .btn {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			min-height: 27px;
			padding: 3px 5px;
			border: 1px solid var(--abc-line-strong);
			border-radius: 5px;
			background: var(--abc-surface);
			color: var(--abc-ink);
			cursor: pointer;
			transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
		}

		:is(.abc-asl, .abc-asl-modern) .btn:hover, :is(.abc-asl, .abc-asl-modern) .btn:focus-visible {
			border-color: var(--abc-brand);
			color: var(--abc-brand);
			outline: none;
		}

		:is(.abc-asl, .abc-asl-modern) .btn-primary {
			border-color: var(--abc-brand);
			background: var(--abc-brand);
			color: #fff;
		}

		:is(.abc-asl, .abc-asl-modern) .btn-primary:hover, :is(.abc-asl, .abc-asl-modern) .btn-primary:focus-visible {
			border-color: var(--abc-brand-dark);
			background: var(--abc-brand-dark);
			color: #fff;
		}

		:is(.abc-asl, .abc-asl-modern) .icon {
			width: 16px;
			height: 16px;
			fill: none;
			stroke: currentColor;
			stroke-width: 2;
			stroke-linecap: round;
			stroke-linejoin: round;
			flex: 0 0 auto;
		}

		:is(.abc-asl, .abc-asl-modern) .boundary {
			display: grid;
			grid-template-columns: minmax(0, 1fr) auto;
			gap: 14px;
			align-items: center;
			margin: 22px 0 18px;
			padding: 14px 16px;
			border-left: 4px solid var(--abc-brand);
			background: rgba(255, 255, 255, 0.72);
		}

		:is(.abc-asl, .abc-asl-modern) .boundary p {
			margin: 0;
		}

		:is(.abc-asl, .abc-asl-modern) .preview-view {
			display: none;
		}

		:is(.abc-asl, .abc-asl-modern) .preview-view.is-active {
			display: block;
		}

		:is(.abc-asl, .abc-asl-modern) .kicker {
			margin: 0 0 5px;
			color: var(--abc-brand);
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
		}

		.abc-asl-modern h1 {
			margin: 0;
			font-size: clamp(34px, 5vw, 56px);
			line-height: 1;
			letter-spacing: 0;
		}

		.abc-asl-modern h2 {
			margin: 0;
			font-size: 22px;
			line-height: 1.2;
		}

		.abc-asl-modern h3 {
			margin: 0;
			font-size: 17px;
			line-height: 1.25;
		}

		

		:is(.abc-asl, .abc-asl-modern) .panel {
			border: 1px solid var(--abc-line);
			border-radius: 8px;
			background: var(--abc-surface);
			box-shadow: var(--abc-shadow);
			overflow: hidden;
		}

		:is(.abc-asl, .abc-asl-modern) .shad-toolbar {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			margin-bottom: 12px;
		}

		/* 0.1.137: die drei .agent-tabs/.agent-tab-Regeln standen hier und sind
		   ENTFERNT — die Status-Tabs wurden zum Dropdown neben der Suche (Ferenc
		   2026-07-28), kein Markup nutzt die Klassen mehr. `.agent-tab` steht
		   weiter in den GEMISCHTEN Knopf-Regeln weiter unten (bei .btn): dort
		   faellt eine Regel nur, wenn JEDER ihrer Selektoren tot ist. */

		:is(.abc-asl, .abc-asl-modern) .shad-toolbar-left, :is(.abc-asl, .abc-asl-modern) .shad-toolbar-right {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			gap: 9px;
		}

		:is(.abc-asl, .abc-asl-modern) .shad-toolbar .form-field {
			min-width: min(360px, 100%);
		}

		/* Der Status-Filter braucht die 360px der Suche NICHT — nebeneinander
		   wuerden beide umbrechen. Gleiche Spezifitaet wie die Regel darueber,
		   spaeter in der Datei, also gewinnt sie. */
		:is(.abc-asl, .abc-asl-modern) .shad-toolbar .form-field--status {
			min-width: min(190px, 100%);
			flex: 0 0 auto;
		}

		:is(.abc-asl, .abc-asl-modern) .shad-table-wrap {
			overflow: hidden;
			border: 1px solid var(--abc-line);
			border-radius: 10px;
			background: var(--abc-surface);
			box-shadow: var(--abc-shadow);
		}

		:is(.abc-asl, .abc-asl-modern) .shad-table-scroll {
			overflow-x: auto;
		}

		:is(.abc-asl, .abc-asl-modern) .shad-table {
			width: 100%;
			min-width: 1060px;
			border-collapse: collapse;
			font-size: 13px;
		}

		:is(.abc-asl, .abc-asl-modern) .shad-table th, :is(.abc-asl, .abc-asl-modern) .shad-table td {
			height: 58px;
			padding: 10px 14px;
			border-bottom: 1px solid var(--abc-line);
			text-align: left;
			vertical-align: middle;
		}

		:is(.abc-asl, .abc-asl-modern) .shad-table th {
			color: var(--abc-muted);
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
			background: color-mix(in srgb, var(--abc-bg) 62%, #fff);
		}

		:is(.abc-asl, .abc-asl-modern) .shad-table tr:last-child td {
			border-bottom: 0;
		}

		:is(.abc-asl, .abc-asl-modern) .shad-table tbody tr {
			transition: background 0.16s ease;
		}

		:is(.abc-asl, .abc-asl-modern) .shad-table tbody tr:hover, :is(.abc-asl, .abc-asl-modern) .shad-table tbody tr.is-selected {
			background: color-mix(in srgb, var(--abc-brand) 7%, transparent);
		}

		:is(.abc-asl, .abc-asl-modern) .drag-dots {
			color: var(--abc-muted);
			font-size: 18px;
			line-height: 1;
			letter-spacing: 1px;
		}

		:is(.abc-asl, .abc-asl-modern) .customer-cell {
			display: grid;
			gap: 2px;
			min-width: 0;
		}

		:is(.abc-asl, .abc-asl-modern) .customer-cell strong {
			font-size: 13px;
		}

		:is(.abc-asl, .abc-asl-modern) .shad-actions {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			gap: 7px;
		}

		:is(.abc-asl, .abc-asl-modern) .icon-btn {
			display: inline-grid;
			place-items: center;
			width: 27px;
			height: 27px;
			border: 1px solid var(--abc-line);
			border-radius: 5px;
			background: #fff;
			color: var(--abc-muted);
			cursor: pointer;
		}

		:is(.abc-asl, .abc-asl-modern) .icon-btn:hover, :is(.abc-asl, .abc-asl-modern) .icon-btn:focus-visible {
			border-color: var(--abc-brand);
			color: var(--abc-brand);
			outline: none;
		}

		:is(.abc-asl, .abc-asl-modern) .client-detail-preview {
			margin-top: 16px;
			border: 1px solid var(--abc-line);
			border-radius: 10px;
			background: var(--abc-surface);
			box-shadow: var(--abc-shadow);
			overflow: hidden;
		}

		

		:is(.abc-asl, .abc-asl-modern) .client-detail-preview__body {
			padding: 16px;
		}

		:is(.abc-asl, .abc-asl-modern) .detail-page-head {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;
			gap: 12px;
			margin: 22px 0 16px;
		}

		:is(.abc-asl, .abc-asl-modern) .detail-block--wide {
			margin-bottom: 14px;
		}

		

		:is(.abc-asl, .abc-asl-modern) .detail-block__head h3 {
			margin: 0;
		}

		

		

		

		:is(.abc-asl, .abc-asl-modern) .matching-archive {
			margin-top: 16px;
			border: 1px solid var(--abc-line);
			border-radius: 10px;
			background: var(--abc-surface);
			overflow: hidden;
		}

		

		:is(.abc-asl, .abc-asl-modern) .matching-archive__head h3 {
			margin-bottom: 4px;
		}

		

		:is(.abc-asl, .abc-asl-modern) .match-table-wrap {
			overflow-x: auto;
		}

		:is(.abc-asl, .abc-asl-modern) .match-table {
			width: 100%;
			min-width: 650px;
			border-collapse: collapse;
			table-layout: fixed;
			font-size: 13px;
		}

		:is(.abc-asl, .abc-asl-modern) .match-table th, :is(.abc-asl, .abc-asl-modern) .match-table td {
			padding: 10px 8px;
			border-bottom: 1px solid var(--abc-line);
			text-align: left;
			vertical-align: middle;
		}

		:is(.abc-asl, .abc-asl-modern) .match-table th {
			color: var(--abc-muted);
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
			background: #fff;
		}

		:is(.abc-asl, .abc-asl-modern) .match-table tr:last-child td {
			border-bottom: 0;
		}

		:is(.abc-asl, .abc-asl-modern) .match-table tr.is-added {
			background: color-mix(in srgb, var(--abc-brand) 7%, transparent);
		}

		/* 0.1.151 (Ferenc 2026-07-29): „Fotos links und Abstand zu Titel und ID
		   zu gross." Ursache war die SPALTE, nicht der Abstand: sie stand auf
		   64px, waehrend das Foto seit 0.1.148 nur 42px breit ist — 22px tote
		   Flaeche vor jedem Titel. Spalte = Fotobreite, Abstand knapper. */
		:is(.abc-asl, .abc-asl-modern) .match-property {
			display: grid;
			grid-template-columns: 12px 42px minmax(0, 1fr);
			gap: 7px;
			align-items: center;
			min-width: 0;
		}

		:is(.abc-asl, .abc-asl-modern) .match-table th:nth-child(1) { width: 38%; }
		:is(.abc-asl, .abc-asl-modern) .match-table th:nth-child(2) { width: 22%; }
		:is(.abc-asl, .abc-asl-modern) .match-table th:nth-child(3) { width: 17%; }
		:is(.abc-asl, .abc-asl-modern) .match-table th:nth-child(4) { width: 10%; }
		:is(.abc-asl, .abc-asl-modern) .match-table th:nth-child(5) { width: 13%; }

		:is(.abc-asl, .abc-asl-modern) .match-table td:nth-child(3), :is(.abc-asl, .abc-asl-modern) .match-table td:nth-child(4), :is(.abc-asl, .abc-asl-modern) .match-table td:nth-child(5) {
			white-space: nowrap;
		}

		:is(.abc-asl, .abc-asl-modern) .match-status-line {
			padding: 12px 16px;
			border-top: 1px solid var(--abc-line);
			color: var(--abc-muted);
			font-size: 13px;
		}

		

		:is(.abc-asl, .abc-asl-modern) .form-field {
			display: grid;
			gap: 5px;
		}

		:is(.abc-asl, .abc-asl-modern) .form-field span {
			color: var(--abc-muted);
			font-size: 12px;
			font-weight: 700;
			text-transform: uppercase;
		}

		:is(.abc-asl, .abc-asl-modern) .form-field input, :is(.abc-asl, .abc-asl-modern) .form-field textarea, :is(.abc-asl, .abc-asl-modern) .form-field select {
			width: 100%;
			min-height: 39px;
			border: 1px solid var(--abc-line-strong);
			border-radius: 8px;
			background: #fff;
			color: var(--abc-ink);
			padding: 9px 10px;
		}

		

		

		

		

		

		:is(.abc-asl, .abc-asl-modern) .meta {
			display: flex;
			flex-wrap: wrap;
			gap: 6px 12px;
			font-size: 13px;
		}

		

		:is(.abc-asl, .abc-asl-modern) .badge {
			display: inline-flex;
			align-items: center;
			gap: 5px;
			min-height: 0;
			padding: 3px 5px;
			border: 1px solid var(--abc-line);
			border-radius: 999px;
			background: var(--abc-bg);
			font-size: 12px;
			white-space: nowrap;
		}

		:is(.abc-asl, .abc-asl-modern) .badge-new {
			border-color: var(--abc-brand);
			background: color-mix(in srgb, var(--abc-brand) 12%, #fff);
			color: var(--abc-brand);
			font-weight: 700;
		}

		:is(.abc-asl, .abc-asl-modern) .badge-good {
			border-color: var(--abc-green);
			background: var(--abc-green-soft);
			color: var(--abc-green-ink);
		}

		:is(.abc-asl, .abc-asl-modern) .badge-maybe {
			border-color: var(--abc-amber);
			background: var(--abc-amber-soft);
			color: var(--abc-amber);
		}

		:is(.abc-asl, .abc-asl-modern) .badge-no {
			border-color: var(--abc-red);
			background: var(--abc-red-soft);
			color: var(--abc-red);
		}

		

		:is(.abc-asl, .abc-asl-modern) .detail-block {
			padding: 14px;
			border: 1px solid var(--abc-line);
			border-radius: 8px;
			background: color-mix(in srgb, var(--abc-bg) 70%, #fff);
		}

		:is(.abc-asl, .abc-asl-modern) .token {
			overflow-wrap: anywhere;
			padding: 10px;
			border: 1px dashed var(--abc-line-strong);
			border-radius: 8px;
			background: #fff;
			font-size: 13px;
		}

		

		

		:is(.abc-asl, .abc-asl-modern) .photo {
			position: relative;
			overflow: hidden;
			width: 106px;
			aspect-ratio: 4 / 3;
			border-radius: 8px;
			background-color: var(--abc-soft);
			background-image: url("../aqua-contact-sheet.jpg");
			background-repeat: no-repeat;
			background-size: 420% auto;
			box-shadow: inset 0 0 0 1px rgba(28, 27, 25, 0.09);
		}

		:is(.abc-asl, .abc-asl-modern) .photo::after {
			content: "";
			position: absolute;
			inset: 0;
			background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.16));
		}

		

		

		:is(.abc-asl, .abc-asl-modern) .price {
			font-size: 16px;
		}

		:is(.abc-asl, .abc-asl-modern) .ref, :is(.abc-asl, .abc-asl-modern) .small {
			font-size: 13px;
		}

		

		

		

		:is(.abc-asl, .abc-asl-modern) .customer-top h1 {
			max-width: 720px;
		}

		

		

		

		:is(.abc-asl, .abc-asl-modern) .customer-property-row .photo {
			width: 158px;
		}

		

		:is(.abc-asl, .abc-asl-modern) .choice {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 5px;
			min-height: 27px;
			padding: 3px 5px;
			border: 1px solid var(--abc-line-strong);
			border-radius: 5px;
			background: #fff;
			cursor: pointer;
			font-weight: 700;
			transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
		}

		:is(.abc-asl, .abc-asl-modern) .choice:hover, :is(.abc-asl, .abc-asl-modern) .choice:focus-visible {
			outline: none;
		}

		:is(.abc-asl, .abc-asl-modern) .choice[data-choice="good"]:hover, :is(.abc-asl, .abc-asl-modern) .choice[data-choice="good"][aria-pressed="true"] {
			border-color: var(--abc-green);
			background: var(--abc-green-soft);
			color: var(--abc-green);
		}

		:is(.abc-asl, .abc-asl-modern) .choice[data-choice="maybe"]:hover, :is(.abc-asl, .abc-asl-modern) .choice[data-choice="maybe"][aria-pressed="true"] {
			border-color: var(--abc-amber);
			background: var(--abc-amber-soft);
			color: var(--abc-amber);
		}

		:is(.abc-asl, .abc-asl-modern) .choice[data-choice="maybe"] .icon {
			transform: rotate(-32deg);
		}

		:is(.abc-asl, .abc-asl-modern) .choice[data-choice="no"]:hover, :is(.abc-asl, .abc-asl-modern) .choice[data-choice="no"][aria-pressed="true"] {
			border-color: var(--abc-red);
			background: var(--abc-red-soft);
			color: var(--abc-red);
		}

		

		:is(.abc-asl, .abc-asl-modern) .customer-dialog {
			width: min(760px, calc(100vw - 28px));
			max-height: min(860px, calc(100vh - 28px));
			padding: 0;
			border: 1px solid var(--abc-line-strong);
			border-radius: 8px;
			background: var(--abc-surface);
			color: var(--abc-ink);
			box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
		}

		:is(.abc-asl, .abc-asl-modern) .customer-dialog::backdrop {
			background: rgba(28, 27, 25, 0.48);
		}

		

		:is(.abc-asl, .abc-asl-modern) .customer-dialog-head, :is(.abc-asl, .abc-asl-modern) .customer-dialog-footer {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 14px;
			padding: 16px 18px;
		}

		:is(.abc-asl, .abc-asl-modern) .customer-dialog-head {
			border-bottom: 1px solid var(--abc-line);
		}

		:is(.abc-asl, .abc-asl-modern) .customer-dialog-head .kicker {
			margin-bottom: 4px;
		}

		:is(.abc-asl, .abc-asl-modern) .customer-dialog-body {
			display: grid;
			gap: 18px;
			max-height: calc(100vh - 190px);
			overflow-y: auto;
			padding: 18px;
		}

		:is(.abc-asl, .abc-asl-modern) .customer-dialog-footer {
			justify-content: flex-end;
			border-top: 1px solid var(--abc-line);
		}

		:is(.abc-asl, .abc-asl-modern) .deal-summary {
			display: flex;
			align-items: end;
			justify-content: space-between;
			gap: 14px;
			border-left: 3px solid var(--abc-ink);
			background: color-mix(in srgb, var(--abc-bg) 65%, #fff);
		}

		:is(.abc-asl, .abc-asl-modern) .deal-summary__value {
			display: block;
			margin-top: 3px;
			font-size: 22px;
			line-height: 1.1;
		}

		

		:is(.abc-asl, .abc-asl-modern) .copy-feedback.is-visible {
			opacity: 1;
			transform: translateY(0);
		}

		:is(.abc-asl, .abc-asl-modern) .dialog-close {
			display: grid;
			place-items: center;
			width: 36px;
			height: 36px;
			padding: 0;
			border: 1px solid var(--abc-line);
			border-radius: 6px;
			background: #fff;
			color: var(--abc-ink);
			cursor: pointer;
			font-size: 24px;
			line-height: 1;
		}

		

		:is(.abc-asl, .abc-asl-modern) .dialog-fieldset legend {
			margin-bottom: 10px;
			font-size: 13px;
			font-weight: 700;
		}

		:is(.abc-asl, .abc-asl-modern) .dialog-form-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 12px;
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu {
			position: relative;
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu summary {
			display: grid;
			place-items: center;
			width: 27px;
			height: 27px;
			border: 1px solid var(--abc-line-strong);
			border-radius: 5px;
			background: var(--abc-surface);
			color: var(--abc-ink);
			cursor: pointer;
			list-style: none;
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu summary::-webkit-details-marker {
			display: none;
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu > div {
			position: absolute;
			z-index: 4;
			right: 0;
			top: calc(100% + 6px);
			min-width: 150px;
			padding: 3px;
			border: 1px solid var(--abc-line);
			border-radius: 8px;
			background: #fff;
			box-shadow: 0 12px 30px rgba(42, 34, 28, 0.14);
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu > div button {
			width: 100%;
			padding: 3px 5px;
			border: 0;
			border-radius: 5px;
			background: transparent;
			color: var(--abc-ink);
			cursor: pointer;
			font: inherit;
			text-align: left;
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu > div button:hover, :is(.abc-asl, .abc-asl-modern) .action-menu > div button:focus-visible {
			background: var(--abc-bg);
			outline: none;
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu > div button[data-close-customer] {
			color: var(--abc-danger);
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu > div button[data-close-customer]:hover, :is(.abc-asl, .abc-asl-modern) .action-menu > div button[data-close-customer]:focus-visible {
			background: var(--abc-danger-soft);
			color: var(--abc-danger);
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu > div button[data-close-customer]:active {
			background: var(--abc-danger);
			color: #fff;
		}

		:is(.abc-asl, .abc-asl-modern) #close-customer-dialog [type="submit"] {
			border-color: var(--abc-danger);
			background: var(--abc-danger);
			color: #fff;
		}

		:is(.abc-asl, .abc-asl-modern) .action-menu__divider {
			display: block;
			height: 1px;
			margin: 5px 4px;
			background: var(--abc-line);
		}

		

		:is(.abc-asl, .abc-asl-modern) .selection-workspace {
			display: grid;
			grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.8fr);
			gap: 16px;
			align-items: start;
			margin-top: 16px;
		}

		:is(.abc-asl, .abc-asl-modern) .selection-workspace .matching-archive {
			margin-top: 0;
		}

		:is(.abc-asl, .abc-asl-modern) .match-table tbody tr[draggable="true"] {
			cursor: grab;
			will-change: transform;
			transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.24s cubic-bezier(0.2, 0.82, 0.22, 1);
		}

		:is(.abc-asl, .abc-asl-modern) .match-table tbody tr[draggable="true"]:hover {
			background: color-mix(in srgb, var(--abc-brand) 6%, transparent);
			box-shadow: inset 3px 0 0 var(--abc-brand);
		}

		:is(.abc-asl, .abc-asl-modern) .match-table tbody tr.is-dragging {
			opacity: 0.48;
			transform: translateX(14px) rotate(0.45deg) scale(0.985);
			background: color-mix(in srgb, var(--abc-brand) 10%, #fff);
			box-shadow: 0 12px 24px rgba(28, 27, 25, 0.2);
		}

		:is(.abc-asl, .abc-asl-modern) .match-table tbody tr.is-drag-offset {
			transform: translateY(var(--drag-offset, 0));
		}

		:is(.abc-asl, .abc-asl-modern) .match-property .drag-dots {
			display: block;
			width: 12px;
			height: 22px;
			border-radius: 3px;
			background-image: radial-gradient(circle, currentColor 1.25px, transparent 1.5px);
			background-position: 1px 1px;
			background-size: 6px 6px;
			color: var(--abc-muted);
			cursor: grab;
		}

		:is(.abc-asl, .abc-asl-modern) .match-table tbody tr.is-dragging .drag-dots {
			cursor: grabbing;
			color: var(--abc-brand);
		}

		

		:is(.abc-asl, .abc-asl-modern) .stock-drag-preview .photo {
			width: 54px;
			height: 44px;
		}

		:is(.abc-asl, .abc-asl-modern) .stock-drag-preview strong, :is(.abc-asl, .abc-asl-modern) .stock-drag-preview span {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		:is(.abc-asl, .abc-asl-modern) .stock-drag-preview strong {
			font-size: 12px;
		}

		:is(.abc-asl, .abc-asl-modern) .stock-drag-preview span {
			margin-top: 3px;
			color: var(--abc-muted);
			font-size: 11px;
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray {
			position: sticky;
			top: 18px;
			min-height: 360px;
			border: 1px solid var(--abc-line);
			border-radius: 8px;
			background: var(--abc-surface);
			box-shadow: var(--abc-shadow);
			overflow: hidden;
			transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray.is-drag-over {
			border-color: var(--abc-brand);
			background: color-mix(in srgb, var(--abc-brand) 5%, #fff);
			box-shadow: 0 0 0 4px color-mix(in srgb, var(--abc-brand) 16%, transparent), var(--abc-shadow);
		}

		

		:is(.abc-asl, .abc-asl-modern) .selection-tray__head h3 {
			margin: 0 0 3px;
		}

		

		

		:is(.abc-asl, .abc-asl-modern) .selection-tray__list {
			display: grid;
			transition: padding 0.22s cubic-bezier(0.2, 0.82, 0.22, 1);
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray.is-drag-over .selection-tray__list {
			padding-top: 9px;
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray-item {
			display: grid;
			grid-template-columns: 76px minmax(0, 1fr) auto;
			gap: 10px;
			align-items: start;
			padding: 12px 14px;
			border-bottom: 1px solid var(--abc-line);
			transition: transform 0.22s cubic-bezier(0.2, 0.82, 0.22, 1), opacity 0.18s ease;
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray.is-drag-over .selection-tray-item {
			transform: translateY(9px);
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray-item.is-arriving {
			animation: selection-arrive 0.34s cubic-bezier(0.2, 0.82, 0.22, 1) both;
		}

		@keyframes selection-arrive {
			0% {
				opacity: 0;
				transform: translateY(-18px) scale(0.97);
			}
			65% {
				opacity: 1;
				transform: translateY(3px) scale(1.01);
			}
			100% {
				opacity: 1;
				transform: translateY(0) scale(1);
			}
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray-item:last-child {
			border-bottom: 0;
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray-item__info {
			display: grid;
			gap: 4px;
			min-width: 0;
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray-item__info strong {
			line-height: 1.25;
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray-item__info > span {
			color: var(--abc-muted);
		}

		/* 0.1.148 (Ferenc 2026-07-29): „die Icon-Buttons sind zu gross,
		   minimalistischer — aber mit Rahmen."
		   Vorher 32x32 mit einem 12px-Symbol darin und einem 20px-Kreuz daneben:
		   viel Kasten, ungleich gefuellt. Jetzt 24x24, und Symbol wie Kreuz sind
		   gleich gross — der Rahmen bleibt, er traegt die Form. */
		:is(.abc-asl, .abc-asl-modern) .selection-tray-item .icon-btn {
			width: 24px;
			height: 24px;
			/* ⚠ min-* MUSS mit: .abc-asl-modern .icon-btn setzt min-width/min-height
			   auf 27px. Ohne diese zwei Zeilen bliebe der Knopf trotz width:24px
			   bei 27 — die Regel waere da und wirkungslos, und niemand sieht warum. */
			min-width: 24px;
			min-height: 24px;
			font-size: 15px !important;
			line-height: 1;
			border-radius: 5px;
		}

		:is(.abc-asl, .abc-asl-modern) .selection-tray-item__actions {
			display: flex;
			gap: 4px;
		}


		@media (max-width: 1080px) {
			:is(.abc-asl, .abc-asl-modern) .agent-grid, :is(.abc-asl, .abc-asl-modern) .detail-grid, :is(.abc-asl, .abc-asl-modern) .selection-workspace {
				grid-template-columns: 1fr;
			}

			:is(.abc-asl, .abc-asl-modern) .selection-tray {
				position: static;
			}

			

			

			

			

			

			:is(.abc-asl, .abc-asl-modern) .customer-property-row .photo {
				width: 140px;
			}

			
		}

		@media (max-width: 760px) {
			:is(.abc-asl, .abc-asl-modern) .preview-top, :is(.abc-asl, .abc-asl-modern) .boundary, :is(.abc-asl, .abc-asl-modern) .view-hero, :is(.abc-asl, .abc-asl-modern) .customer-top, :is(.abc-asl, .abc-asl-modern) .search-line, :is(.abc-asl, .abc-asl-modern) .add-property {
				grid-template-columns: 1fr;
			}

			:is(.abc-asl, .abc-asl-modern) .preview-top {
				align-items: stretch;
			}

			

			:is(.abc-asl, .abc-asl-modern) .metric-row, :is(.abc-asl, .abc-asl-modern) .customer-summary, :is(.abc-asl, .abc-asl-modern) .info-grid, :is(.abc-asl, .abc-asl-modern) .dialog-form-grid {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			
		}

		@media (max-width: 560px) {
			

			

			

			

			

			:is(.abc-asl, .abc-asl-modern) .customer-summary .metric span {
				font-size: 10px;
				white-space: nowrap;
			}

			:is(.abc-asl, .abc-asl-modern) .customer-summary .metric strong {
				font-size: 15px;
			}

			:is(.abc-asl, .abc-asl-modern) .photo, :is(.abc-asl, .abc-asl-modern) .customer-property-row .photo {
				width: 100%;
				aspect-ratio: 16 / 9;
			}

			

			:is(.abc-asl, .abc-asl-modern) .btn, :is(.abc-asl, .abc-asl-modern) .choice {
				width: 100%;
			}

		:is(.abc-asl, .abc-asl-modern) .customer-actions .choice {
			min-height: 42px;
			font-size: 12px;
		}
		}


		@media (max-width: 560px) {
			

			:is(.abc-asl, .abc-asl-modern) #send-selection {
				position: fixed;
				z-index: 12;
				bottom: 12px;
				left: 12px;
				right: 12px;
				width: auto;
				min-height: 46px;
				box-shadow: 0 10px 24px rgba(28, 27, 25, 0.22);
			}

			
		}

/* Live CRM dashboard bindings */
.abc-asl-modern {
	width: 100%;
	margin: 0;
	padding: 0;
}

.abc-asl-modern .photo img, .abc-asl-modern .match-property .photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.abc-asl-modern .abc-asl-message {
	margin: 18px 0;
}

.abc-asl-modern .selection-tray-item form {
	margin: 0;
}

.abc-asl-modern .selection-tray-item__actions .icon-btn {
	padding: 0;
}

.abc-asl-modern [data-view][hidden], .abc-asl-modern [data-customer-row][hidden] {
	display: none;
}

/* WordPress/Elementor isolation for the approved CRM dashboard UI. */
.abc-asl-modern, .abc-asl-modern * {
	box-sizing: border-box !important;
}

.abc-asl-modern {
	--abc-bg: #fafafa;
	--abc-surface: #ffffff;
	--abc-ink: #09090b;
	--abc-muted: #71717a;
	--abc-soft: #f4f4f5;
	--abc-line: #e4e4e7;
	--abc-line-strong: #d4d4d8;
	--abc-brand: #18181b;
	--abc-brand-dark: #000000;
	--abc-blue: #4f7ce0;
	--abc-green: #059669;
	--abc-amber: #b45309;
	--abc-red: #3f3f46;
	--abc-danger: #b42318;
	--abc-danger-soft: #fff1f0;
	--abc-green-soft: #ecfdf5;
	--abc-amber-soft: #fffbeb;
	--abc-red-soft: #f4f4f5;
	--abc-accent: #4f7ce0;
	--abc-accent-hover: #3f68c4;
	--abc-accent-fg: #ffffff;
	--abc-accent-soft: #edf2fd;
	/* Chip text on the matching -soft background. The brand colours are built to
	   carry WHITE text on a filled button, where they are fine; as 10px text on
	   their own pale tint they measure 3.54:1 and 3.58:1, against the 4.5:1 that
	   small text needs. Darkened just far enough (4.54:1 / 4.58:1) and given
	   their own tokens, so the buttons and links that use --abc-accent keep the
	   brand colour exactly as it is. (2026-07-26, measured not guessed.) */
	--abc-accent-ink: #446bc2;
	--abc-green-ink: #04825b;
	--abc-accent-line: #c5d4f6;
	--abc-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.04);
	isolation: isolate;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	transform: none;
	background: transparent;
	color: var(--abc-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.45;
	text-align: left;
}

/* Keine Unterstreichung — gilt für ALLE Links, auch für die, die wie ein Knopf
   aussehen. */
.abc-asl-modern a, .abc-asl-modern a:hover, .abc-asl-modern a:focus {
	text-decoration: none !important;
}

/* Textfarbe erben — aber NICHT, wenn der Link als Knopf gestaltet ist.
   (Ferenc 2026-07-28: „Customer Liste im Agent Bereich ist der Button schwarz
   und die Schrift auch.")

   Der „Dashboard"-Eintrag in der Aktionen-Spalte ist ein <a class="btn
   btn-primary">. Das `color: inherit !important` galt auch für ihn, also erbte
   er die dunkle Textfarbe der Tabellenzeile — schwarze Schrift auf schwarzem
   Knopf, Kontrast 1.12. Die 17 anderen Aktions-Knöpfe sind <button> und waren
   deshalb nie betroffen; genau darum ist es so lange niemandem aufgefallen.

   Der Ausschluss ist die Ursache, nicht das Symptom: die Isolation soll TEXT-
   Links vor der Theme-Farbe schützen, Knöpfe bringen ihre Farbe selbst mit.
   Ein weiteres !important auf .btn-primary hätte dasselbe Bild erzeugt und die
   nächste Person wieder raten lassen. */
/* 0.1.135: .asl-side-link joins the exclusion list for the SAME reason .btn is
   here — the left rail's links (Home/Admin/Logout) sit on black and bring their
   own colour, exactly like a button. Without this the rule wins on specificity
   (0,3,1 vs the rail's 0,2,0) even against !important, and the labels rendered in
   the theme's near-black — the "font Farben gehen nicht" Ferenc saw on stage. */
.abc-asl-modern a:not(.btn):not(.abc-asl-button):not(.asl-side-link),
.abc-asl-modern a:not(.btn):not(.abc-asl-button):not(.asl-side-link):hover,
.abc-asl-modern a:not(.btn):not(.abc-asl-button):not(.asl-side-link):focus {
	color: inherit !important;
}

.abc-asl-modern button, .abc-asl-modern input, .abc-asl-modern select, .abc-asl-modern textarea {
	font: inherit !important;
	letter-spacing: 0 !important;
}

.abc-asl-modern button {
	text-transform: none !important;
}

.abc-asl-modern .preview-top, .abc-asl-modern .view-hero, .abc-asl-modern .shad-toolbar, .abc-asl-modern .shad-table-wrap, .abc-asl-modern .client-detail-preview, .abc-asl-modern .detail-block, .abc-asl-modern .matching-archive, .abc-asl-modern .selection-tray {
	border-color: var(--abc-line);
	background: var(--abc-surface);
	color: var(--abc-ink);
	box-shadow: var(--abc-shadow);
}

.abc-asl-modern .preview-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--abc-line);
	background: transparent;
	box-shadow: none;
}

.abc-asl-modern .kicker {
	margin: 0 0 6px;
	color: var(--abc-muted);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: uppercase;
}

.abc-asl-modern h1, .abc-asl-modern h2, .abc-asl-modern h3, .abc-asl-modern p {
	color: inherit !important;
	font-family: inherit !important;
	letter-spacing: 0 !important;
}

.abc-asl-modern .helper, .abc-asl-modern .small, .abc-asl-modern .meta, .abc-asl-modern .table-head, .abc-asl-modern .ref, .abc-asl-modern .token {
	color: var(--abc-muted);
}

/* WHY THREE PROPERTIES LOST THEIR !important (2026-07-28).

   This rule carries no state, so it applies while the button is hovered too. As
   long as border, background and colour were !important here, NO :hover rule
   anywhere could repaint them — not the accent added today, not even the
   `border-color: var(--abc-brand)` two rules below. That is why the dashboard
   buttons looked dead to the pointer.

   The layout properties keep theirs: a button does not change its padding or
   line-height when you point at it, so !important costs nothing there and still
   guards the geometry against a theme.

   The three that a state MUST be able to change are now plain declarations.
   They no longer need the shout: `.abc-asl-modern .btn` is 0-2-0 and already
   out-weighs the Elementor kit's `.elementor-kit-127 button` at 0-1-1.

   RULE OF THUMB for this file: a property that varies by state may never be
   !important in a state-less rule. */
.abc-asl-modern .btn, .abc-asl-modern a.btn, .abc-asl-modern button.btn, .abc-asl-modern .agent-tab, .abc-asl-modern .icon-btn, .abc-asl-modern .action-menu summary {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 5px !important;
	min-height: 27px !important;
	padding: 3px 8px !important;
	border: 1px solid var(--abc-line-strong);
	border-radius: 5px !important;
	background: var(--abc-surface);
	color: var(--abc-ink);
	box-shadow: none !important;
	cursor: pointer !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

.abc-asl-modern .btn-primary, .abc-asl-modern a.btn-primary, .abc-asl-modern button.btn-primary, .abc-asl-modern .agent-tab.is-active {
	border-color: var(--abc-brand);
	background: var(--abc-brand);
	color: #fff;
}

.abc-asl-modern .btn:hover, .abc-asl-modern .btn:focus-visible, .abc-asl-modern .agent-tab:hover, .abc-asl-modern .agent-tab:focus-visible, .abc-asl-modern .icon-btn:hover, .abc-asl-modern .icon-btn:focus-visible {
	border-color: var(--abc-brand);
	outline: none;
}

.abc-asl-modern .icon {
	display: block;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	flex: 0 0 auto;
}

.abc-asl-modern .icon-btn {
	display: inline-grid;
	place-items: center;
	width: 27px;
	min-width: 27px;
	height: 27px;
	min-height: 27px;
	padding: 0;
	color: var(--abc-muted);
}

.abc-asl-modern .form-field {
	display: grid;
	gap: 6px;
	margin: 0;
	color: var(--abc-ink);
}

.abc-asl-modern .form-field span {
	color: var(--abc-muted) !important;
	font-size: 12px !important;
	line-height: 1.25 !important;
}

.abc-asl-modern .form-field input, .abc-asl-modern .form-field textarea, .abc-asl-modern .form-field select {
	width: 100% !important;
	min-height: 34px !important;
	padding: 7px 9px !important;
	border: 1px solid var(--abc-line) !important;
	border-radius: 6px !important;
	background: #fff !important;
	color: var(--abc-ink) !important;
	box-shadow: none !important;
	outline: none !important;
}

.abc-asl-modern .shad-table, .abc-asl-modern .match-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	background: transparent;
	color: var(--abc-ink);
	font-size: 13px;
}

.abc-asl-modern .shad-table-wrap, .abc-asl-modern .shad-table-scroll {
	overflow: visible;
}

.abc-asl-modern .shad-table {
	min-width: 0;
}

/* NOTE: .shad-actions must NOT get a z-index — that made every row its own
   stacking context, so the NEXT row painted over the open menu of the row
   above (the "menu under the Dashboard button" bug). */
.abc-asl-modern .shad-actions {
	position: relative !important;
}

.abc-asl-modern .action-menu {
	position: relative;
}

.abc-asl-modern .action-menu[open] {
	z-index: 1000;
}

.abc-asl-modern .action-menu > div {
	z-index: 1001 !important;
	right: 0 !important;
	min-width: 178px !important;
	overflow: visible !important;
}

.abc-asl-modern .action-menu form {
	margin: 0 !important;
}

.abc-asl-modern .shad-table th, .abc-asl-modern .shad-table td, .abc-asl-modern .match-table th, .abc-asl-modern .match-table td {
	padding: 10px !important;
	border: 0 !important;
	border-bottom: 1px solid var(--abc-line) !important;
	background: transparent !important;
	color: inherit !important;
	text-align: left !important;
	vertical-align: middle !important;
}

.abc-asl-modern .shad-table th, .abc-asl-modern .match-table th {
	color: var(--abc-muted) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
}

.abc-asl-modern .badge {
	display: inline-flex;
	align-items: center;
	min-height: 19px;
	padding: 2px 8px;
	border: 1px solid var(--abc-line-strong);
	border-radius: 999px;
	background: #fff;
	color: var(--abc-muted);
	font-size: 10px;
	line-height: 1.3;
	white-space: nowrap;
	font-weight: 600;
}

/* One size for every chip in the customer list — 10px, like .badge and
   .asl2-flag everywhere else. This block used to raise the table's badges to
   11px so they matched the row text, which left the status badge a pixel bigger
   than the source flag beside it in the same cell. With more chips per row now
   (source, WhatsApp, duplicate, returning) that difference reads as disorder.
   (Ferenc 2026-07-26: "alles im chip font 10px".) */
.abc-asl-modern .shad-table .badge {
	font-size: 10px !important;
	min-height: 19px !important;
}

.abc-asl-modern .badge-good {
	border-color: var(--abc-green);
	background: var(--abc-green-soft);
	color: var(--abc-green-ink);
}

.abc-asl-modern .badge-new {
	border-color: var(--abc-accent-line);
	background: var(--abc-accent-soft);
	color: var(--abc-accent);
}

.abc-asl-modern .badge-maybe {
	border-color: var(--abc-amber);
	background: var(--abc-amber-soft);
	color: var(--abc-amber);
}

.abc-asl-modern .badge-no {
	border-color: var(--abc-red);
	background: var(--abc-red-soft);
	color: var(--abc-red);
}


.abc-asl-modern .detail-block {
	padding: 14px;
	border: 1px solid var(--abc-line);
	border-radius: 8px;
	background: color-mix(in srgb, var(--abc-bg) 70%, #fff);
	box-shadow: none;
}

.abc-asl-modern .detail-block h3, .abc-asl-modern .detail-block__head h3, .abc-asl-modern .selection-tray__head h3, .abc-asl-modern .matching-archive__head h3 {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
}

.abc-asl-modern .selection-workspace {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(320px, 0.8fr);
	gap: 16px;
	align-items: start;
	margin-top: 16px;
}

.abc-asl-modern .selection-tray {
	position: sticky;
	top: 14px;
	padding: 14px;
	border: 1px solid var(--abc-line);
	border-radius: 10px;
}

.abc-asl-modern .selection-tray-item {
	display: grid;
	grid-template-columns: 68px minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 10px 0;
	border-bottom: 1px solid var(--abc-line);
	background: transparent;
}

.abc-asl-modern .photo {
	width: 58px;
	height: 42px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--abc-soft);
}

.abc-asl-modern .customer-dialog {
	width: min(760px, calc(100vw - 24px));
	padding: 0;
	border: 1px solid var(--abc-line);
	border-radius: 10px;
	background: var(--abc-surface);
	color: var(--abc-ink);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22);
}

.abc-asl-modern .dialog-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

@media (max-width: 980px) {
	.abc-asl-modern .detail-grid, .abc-asl-modern .selection-workspace {
		grid-template-columns: 1fr;
	}

	.abc-asl-modern .selection-tray {
		position: static;
	}
}

@media (max-width: 720px) {
	.abc-asl-modern {
		width: 100%;
		margin-left: 0;
		transform: none;
		padding: 16px 12px 38px;
	}

	.abc-asl-modern .preview-top, .abc-asl-modern .view-hero, .abc-asl-modern .shad-toolbar {
		align-items: stretch;
		flex-direction: column;
	}

	.abc-asl-modern .info-grid, .abc-asl-modern .dialog-form-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1199px) {
	.abc-asl-modern .shad-table-wrap {
		overflow: hidden;
	}

	.abc-asl-modern .shad-table-scroll {
		overflow-x: auto;
	}

	.abc-asl-modern .shad-table {
		min-width: 1320px;
	}
}

/* Customer selection isolation against Elementor page/canvas styles. */
.abc-asl.abc-asl-customer, .abc-asl.abc-asl-customer * {
	box-sizing: border-box;
}

.abc-asl.abc-asl-customer {
	isolation: isolate;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	transform: none;
	background: transparent;
	color: var(--abc-asl-ink);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	text-align: left;
	overflow: visible;
}

.abc-asl.abc-asl-customer h1, .abc-asl.abc-asl-customer h2, .abc-asl.abc-asl-customer h3, .abc-asl.abc-asl-customer p, .abc-asl.abc-asl-customer a, .abc-asl.abc-asl-customer button, .abc-asl.abc-asl-customer input, .abc-asl.abc-asl-customer select, .abc-asl.abc-asl-customer textarea {
	font-family: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.abc-asl.abc-asl-customer a, .abc-asl.abc-asl-customer a:hover, .abc-asl.abc-asl-customer a:focus {
	color: inherit;
	text-decoration: none;
}

.abc-asl.abc-asl-customer .abc-asl-customer__hero, .abc-asl.abc-asl-customer .abc-asl-customer__summary, .abc-asl.abc-asl-customer .abc-asl-customer__items, .abc-asl.abc-asl-customer .abc-asl-customer__footer {
	border-color: var(--abc-asl-line);
	background: var(--abc-asl-surface);
	color: var(--abc-asl-ink);
	box-shadow: var(--abc-asl-shadow);
}

/* 0.1.67: was the list-row layout (image | text | rating in one line). Ferenc
   asked for cards; these are the rules that have to change, because they carry
   !important - stacking another override on top would just make the next
   change harder. */
.abc-asl.abc-asl-customer .abc-asl-customer__items {
	overflow: visible;
}

.abc-asl.abc-asl-customer .abc-asl-customer-item {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	background: #fff;
	border-bottom: 0;
}

.abc-asl.abc-asl-customer .abc-asl-thumb--large {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--abc-asl-bg);
	overflow: hidden;
	box-shadow: none;
}

.abc-asl.abc-asl-customer .abc-asl-thumb {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: var(--abc-asl-bg);
	overflow: hidden;
	box-shadow: none;
}

.abc-asl.abc-asl-customer .abc-asl-thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	max-width: none;
}

.abc-asl.abc-asl-customer .abc-asl-customer-item__details, .abc-asl.abc-asl-customer .abc-asl-customer-item__details-link {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--abc-asl-ink);
	box-shadow: none;
	cursor: pointer;
	text-align: left;
}

.abc-asl.abc-asl-customer .abc-asl-button, .abc-asl.abc-asl-customer .abc-asl-choice-group button, .abc-asl.abc-asl-customer .abc-asl-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 9px 13px;
	border: 1px solid var(--abc-asl-line-strong);
	border-radius: 8px;
	background: #fff;
	color: var(--abc-asl-ink);
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	line-height: 1.2;
	text-decoration: none;
}

.abc-asl.abc-asl-customer .abc-asl-button:hover, .abc-asl.abc-asl-customer .abc-asl-button:focus-visible, .abc-asl.abc-asl-customer .abc-asl-choice-group button:hover, .abc-asl.abc-asl-customer .abc-asl-choice-group button:focus-visible {
	border-color: var(--abc-asl-brand);
	background: #fff;
	color: var(--abc-asl-brand);
	outline: none;
}

.abc-asl.abc-asl-customer .abc-asl-button--primary {
	border-color: var(--abc-asl-brand);
	background: var(--abc-asl-brand);
	color: #fff;
}
/* Split off the states (2026-07-28). They used to share the block above, which
   meant the primary button held its exact resting look while the pointer was on
   it. It now deepens, the same way .btn-primary does on the dashboard. */
.abc-asl.abc-asl-customer .abc-asl-button--primary:hover, .abc-asl.abc-asl-customer .abc-asl-button--primary:focus-visible {
	border-color: var(--abc-asl-brand-dark, #000);
	background: var(--abc-asl-brand-dark, #000);
	color: #fff;
}

.abc-asl.abc-asl-customer .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="good"] {
	border-color: var(--abc-asl-good);
	background: #e7f3ed;
	color: var(--abc-asl-good);
}

.abc-asl.abc-asl-customer .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="maybe"] {
	border-color: var(--abc-asl-maybe);
	background: #fff2db;
	color: var(--abc-asl-maybe);
}

.abc-asl.abc-asl-customer .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="no"] {
	border-color: var(--abc-asl-no);
	background: #f4f4f5;
	color: var(--abc-asl-no);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer {
	position: fixed;
	z-index: 99999;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) min(50vw, 1100px);
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-height: 100dvh;
	overflow: hidden;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer[hidden] {
	display: none;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__backdrop {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	background: rgba(24, 24, 27, 0.5);
	box-shadow: none;
	cursor: default;
	opacity: 0;
	transition: opacity 0.32s ease;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer.is-open .abc-asl-listing-drawer__backdrop { opacity: 1; }

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__panel {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	min-width: 0;
	height: 100dvh;
	max-height: 100dvh;
	background: #fff;
	color: var(--abc-asl-ink);
	box-shadow: -18px 0 42px rgba(24, 24, 27, 0.2);
	overflow: hidden;
	transform: translateX(100%);
	transition: transform 0.34s cubic-bezier(0.22, 0.9, 0.3, 1);
	will-change: transform;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer.is-open .abc-asl-listing-drawer__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__backdrop, :is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__panel { transition: none !important; }
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__body {
	min-height: 0;
	max-height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: clamp(18px, 3vw, 34px);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	max-height: 420px;
	min-height: 200px;
	object-fit: cover;
	object-position: center;
	border-radius: 10px;
	border: 1px solid var(--abc-asl-line);
	background: var(--abc-asl-soft);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px;
	align-items: start;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__actions {
	display: grid;
	justify-items: end;
	gap: 10px;
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__actions strong {
	white-space: nowrap;
	font-size: 20px;
	font-weight: 700;
}

@media (max-width: 900px) {
	.abc-asl.abc-asl-customer {
		width: 100%;
		margin-left: 0;
		transform: none;
		padding: 16px 12px 92px;
	}

	/* The card grid already collapses to one column on a narrow screen, so the
	   old single-column override is gone; only the image ratio changes. */
	.abc-asl.abc-asl-customer .abc-asl-thumb--large {
		aspect-ratio: 16 / 9;
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer {
		grid-template-columns: 1fr;
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__backdrop {
		display: none;
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__intro {
		grid-template-columns: 1fr;
	}

	:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__actions {
		justify-items: start;
	}
}

/* v0.1.17 — AJAX match filter: multi-value checkbox groups + row removal */

.abc-asl-modern .match-filter-group legend {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--abc-muted, #6b7280);
	padding: 0 4px;
}
.abc-asl-modern .match-filter-empty {
	font-size: 12px;
	color: var(--abc-muted, #6b7280);
}
.abc-asl-modern .match-filter-grid.is-loading {
	opacity: .55;
	pointer-events: none;
}
.abc-asl-modern .selection-tray-item.is-leaving {
	opacity: 0;
	transform: translateX(12px);
	transition: opacity .18s ease, transform .18s ease;
}

/* ============================================================
   v0.1.19 — Customer header (D4) + connected modern Create/Edit dialog
   All colours reference the global --abc-* palette (see :root / .abc-asl-modern),
   so re-skinning is a matter of changing those variables in one place.
   ============================================================ */
:is(.abc-asl, .abc-asl-modern) .abc-cf-ic { width: 15px; height: 15px; flex: none; }

/* ---- D4 customer header: identity rail + criteria tiles ---- */


:is(.abc-asl, .abc-asl-modern) .abc-cf-avatar { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; font-size: 14px; color: var(--abc-blue); background: color-mix(in srgb, var(--abc-blue) 16%, var(--abc-surface)); border: 1px solid color-mix(in srgb, var(--abc-blue) 32%, var(--abc-surface)); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-avatar--lg { width: 46px; height: 46px; font-size: 16px; }


:is(.abc-asl, .abc-asl-modern) .abc-cf-status { display: inline-flex; align-items: center; gap: 6px; margin-top: 5px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 2px 9px; color: var(--abc-muted); background: var(--abc-soft); border: 1px solid var(--abc-line); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-status .abc-cf-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-status--new { color: var(--abc-blue); background: color-mix(in srgb, var(--abc-blue) 12%, var(--abc-surface)); border-color: color-mix(in srgb, var(--abc-blue) 26%, var(--abc-surface)); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-status--searching { color: var(--abc-green); background: color-mix(in srgb, var(--abc-green) 12%, var(--abc-surface)); border-color: color-mix(in srgb, var(--abc-green) 26%, var(--abc-surface)); }
/* 2026-07-26: --follow_up replaced by the two derived states. "replied" keeps
   the amber that used to mark follow-up, because that is the one that wants
   the agent's eye; "waiting_reply" is deliberately quiet — the ball is with
   the customer and nothing is owed. --follow_up itself is kept: the status can
   still sit on old records, and an unstyled chip would look broken. */
:is(.abc-asl, .abc-asl-modern) .abc-cf-status--follow_up,
:is(.abc-asl, .abc-asl-modern) .abc-cf-status--replied { color: var(--abc-amber); background: color-mix(in srgb, var(--abc-amber) 12%, var(--abc-surface)); border-color: color-mix(in srgb, var(--abc-amber) 26%, var(--abc-surface)); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-status--waiting_reply { color: var(--abc-muted); background: var(--abc-soft); border-color: var(--abc-line, rgba(15, 46, 56, .12)); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-status--closed { color: var(--abc-surface); background: var(--abc-ink); border-color: var(--abc-ink); }
/* 0.1.57: 'paused' is a valid status with its own filter tab but had no chip
   rule, so paused customers fell back to the neutral base style. */
:is(.abc-asl, .abc-asl-modern) .abc-cf-status--paused { color: var(--abc-muted); background: var(--abc-soft); border-color: var(--abc-line-strong); }

:is(.abc-asl, .abc-asl-modern) .abc-cf-meta { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--abc-muted); min-width: 0; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-meta .abc-cf-ic { color: var(--abc-muted); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-meta span { color: var(--abc-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


:is(.abc-asl, .abc-asl-modern) .abc-cf-tile-k .abc-cf-ic { width: 13px; height: 13px; }


/* ---- modern connected dialog ---- */
:is(.abc-asl, .abc-asl-modern) .abc-cf-dialog .abc-cf-form { margin: 0; display: flex; flex-direction: column; max-height: min(880px, calc(100vh - 40px)); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--abc-line, #d8d0c6); background: linear-gradient(180deg, color-mix(in srgb, var(--abc-blue, #245c75) 10%, var(--abc-surface, #fff)), var(--abc-surface, #fff)); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-head-txt { flex: 1; min-width: 0; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-head-txt h2 { margin: 0; font-size: 16px; color: var(--abc-ink, #1c1b19) !important; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-head-txt .kicker { margin: 0 0 1px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-x { border: 0; background: transparent; color: var(--abc-muted, #6d6760); font-size: 22px; line-height: 1; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; flex: none; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-x:hover { background: var(--abc-soft, #ebe5dc); color: var(--abc-ink, #1c1b19); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-dialog .abc-cf-body { display: grid; gap: 18px; padding: 16px 18px; overflow-y: auto; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-legend { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--abc-blue, #245c75); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-legend::after { content: ""; flex: 1; height: 1px; background: var(--abc-line, #d8d0c6); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-legend-ic { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--abc-blue, #245c75) 12%, var(--abc-surface, #fff)); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 11px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-field { display: grid; gap: 5px; min-width: 0; grid-column: span 3; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-third { grid-column: span 2; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-col2 { grid-column: 1 / -1; }
/* Multi-select values as toggle pills — same look as the stock-filter pills
   (v0.1.26). The native checkbox stays underneath (visually hidden) so form
   submits keep working; :checked drives the filled state. */
:is(.abc-asl, .abc-asl-modern) .abc-cf-months { display: flex; flex-wrap: wrap; gap: 5px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-check { position: relative; display: inline-flex; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-check input { position: absolute; opacity: 0; pointer-events: none; margin: 0; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-check span {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	border: 1px solid var(--abc-line-strong, #d4d4d8);
	background: var(--abc-surface, #fff);
	color: var(--abc-muted, #71717a);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
}
:is(.abc-asl, .abc-asl-modern) .abc-cf-check span:hover { color: var(--abc-ink, #09090b); border-color: var(--abc-muted, #71717a); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-check input:checked + span { background: var(--abc-brand, #18181b); border-color: var(--abc-brand, #18181b); color: #ffffff; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-check input:focus-visible + span { outline: 2px solid var(--abc-accent, #4f7ce0); outline-offset: 2px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-label { font-size: 11.5px; font-weight: 600; color: var(--abc-muted, #6d6760); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-input { display: flex; align-items: center; gap: 9px; min-height: 38px; border: 1px solid var(--abc-line-strong, #bfb3a8); border-radius: 10px; padding: 7px 11px; background: color-mix(in srgb, var(--abc-bg, #f6f4f1) 40%, var(--abc-surface, #fff)); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-input:focus-within { border-color: var(--abc-blue, #245c75); box-shadow: 0 0 0 3px color-mix(in srgb, var(--abc-blue, #245c75) 18%, transparent); background: var(--abc-surface, #fff); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-input .abc-cf-ic { color: var(--abc-muted, #6d6760); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-input input, :is(.abc-asl, .abc-asl-modern) .abc-cf-input select, :is(.abc-asl, .abc-asl-modern) .abc-cf-input textarea { border: 0; background: transparent; font: inherit; color: var(--abc-ink, #1c1b19); width: 100%; outline: none; resize: none; padding: 0; margin: 0; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-has-select select { appearance: none; -webkit-appearance: none; cursor: pointer; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-has-select > .abc-cf-ic:last-child { margin-left: auto; pointer-events: none; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-has-textarea { align-items: flex-start; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-has-textarea .abc-cf-ic { margin-top: 3px; }
/* A read-only field states something the agent cannot change — today only the
   customer's own message. It must NOT look like the input boxes above: no
   border, no focus ring, nothing to click. That difference is the whole point,
   so it reads as a quotation rather than an empty field somebody forgot to
   fill. `white-space: pre-line` keeps the line breaks the visitor typed. */
:is(.abc-asl, .abc-asl-modern) .abc-cf-readonly { display: flex; align-items: flex-start; gap: 9px; min-height: 38px; padding: 7px 0; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-readonly .abc-cf-ic { margin-top: 2px; color: var(--abc-muted, #6d6760); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-readonly-text { flex: 1; font-size: 13.5px; line-height: 1.55; color: var(--abc-ink, #1c1b19); white-space: pre-line; overflow-wrap: anywhere; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg { display: flex; background: var(--abc-soft, #ebe5dc); border: 1px solid var(--abc-line, #d8d0c6); border-radius: 10px; padding: 3px; gap: 3px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg-opt { position: relative; flex: 1; margin: 0; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg-opt span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 600; color: var(--abc-muted, #6d6760); cursor: pointer; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg-opt input:checked + span { background: var(--abc-surface, #fff); color: var(--abc-ink, #1c1b19); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg-opt input:focus-visible + span { outline: 2px solid var(--abc-blue, #245c75); outline-offset: 1px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-reveal { display: none; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-reveal.is-open { display: grid; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-top: 1px solid var(--abc-line, #d8d0c6); background: color-mix(in srgb, var(--abc-bg, #f6f4f1) 30%, var(--abc-surface, #fff)); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-hint { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--abc-muted, #6d6760); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-actions { display: flex; gap: 8px; flex: none; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-actions .btn { display: inline-flex; align-items: center; gap: 7px; }
@media (max-width: 720px) { :is(.abc-asl, .abc-asl-modern) .abc-cf-grid { grid-template-columns: 1fr 1fr; } :is(.abc-asl, .abc-asl-modern) .abc-cf-field, :is(.abc-asl, .abc-asl-modern) .abc-cf-third { grid-column: span 1; } :is(.abc-asl, .abc-asl-modern) .abc-cf-col2 { grid-column: 1 / -1; } }
@media (max-width: 460px) { :is(.abc-asl, .abc-asl-modern) .abc-cf-grid { grid-template-columns: 1fr; } :is(.abc-asl, .abc-asl-modern) .abc-cf-field, :is(.abc-asl, .abc-asl-modern) .abc-cf-third, :is(.abc-asl, .abc-asl-modern) .abc-cf-col2 { grid-column: 1 / -1; } :is(.abc-asl, .abc-asl-modern) .abc-cf-foot { flex-direction: column; align-items: stretch; } :is(.abc-asl, .abc-asl-modern) .abc-cf-actions { justify-content: flex-end; } }

/* v0.1.21 — closing dialog: thank-you / Google review section */
:is(.abc-asl, .abc-asl-modern) .abc-cf-review { margin-top: 4px; padding: 14px; border: 1px solid var(--abc-line, #d8d0c6); border-radius: 12px; background: color-mix(in srgb, var(--abc-blue, #245c75) 5%, var(--abc-surface, #fff)); display: grid; gap: 10px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-review__head { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--abc-ink, #1c1b19); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-review__head .abc-cf-ic { color: var(--abc-blue, #245c75); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-lockedlink { display: flex; align-items: center; gap: 8px; border: 1px dashed var(--abc-line-strong, #bfb3a8); border-radius: 10px; padding: 8px 11px; background: var(--abc-soft, #ebe5dc); color: var(--abc-muted, #6d6760); font-size: 12.5px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-lockedlink .abc-cf-ic { color: var(--abc-muted, #6d6760); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-lockedlink > span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-lock { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; background: var(--abc-line, #d8d0c6); color: var(--abc-ink, #1c1b19); border-radius: 999px; padding: 2px 8px; flex: none; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-close-form.is-nodeal [data-abc-asl-deal-value] { display: none; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-close-name { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--abc-asl-accent, #4f7ce0); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-close-name:empty { display: none; }

/* ============================================================
   W1 detail workspace (v0.1.25) — shadcn-style components.
   Chip filter bar + collapsible grid, ACF column table, selection
   tray with feedback donut and drop zone. Namespaced .asl2-*.
   ============================================================ */

.abc-asl-modern .btn-sm { padding: 5px 11px; border-radius: 6px; }
.abc-asl-modern .btn svg.abc-cf-ic { width: 13px; height: 13px; margin-right: 5px; vertical-align: -2px; }
.abc-asl-modern .badge { font-size: 10px; padding: 2px 8px; }
.abc-asl-modern .badge-no { background: var(--abc-red-soft); color: var(--abc-red); border-color: var(--abc-line-strong); }
.abc-asl-modern .btn:focus-visible, .abc-asl-modern .asl2-field select:focus-visible, .abc-asl-modern .asl2-field input:focus-visible { outline: 2px solid var(--abc-accent); outline-offset: 1px; }

/* ---- filter panel ---- */
.abc-asl-modern .asl2-filter {
	margin-top: 16px;
	padding: 10px 12px;
	border: 1px solid var(--abc-line);
	border-radius: 10px;
	background: var(--abc-soft);
}
.abc-asl-modern .asl2-filter.is-loading { opacity: 0.55; pointer-events: none; }
.abc-asl-modern .asl2-chipbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.abc-asl-modern .asl2-chiplbl { font-size: 11px; font-weight: 600; color: var(--abc-muted); }
.abc-asl-modern .asl2-chips { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.abc-asl-modern .asl2-spacer { flex: 1 1 auto; }
.abc-asl-modern .asl2-chip {
	font: inherit;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	border: 1px solid var(--abc-line-strong);
	background: var(--abc-surface);
	color: var(--abc-ink);
	font-size: 11px !important;
	font-weight: 600;
	cursor: pointer;
	line-height: 1.5;
}
.abc-asl-modern .asl2-chip:hover { border-color: var(--abc-muted); }
.abc-asl-modern .asl2-chip .asl2-x { color: var(--abc-muted); font-weight: 700; }
.abc-asl-modern .asl2-chip.is-seeded { border-color: color-mix(in srgb, var(--abc-green) 45%, transparent); background: var(--abc-green-soft); color: var(--abc-green); }
.abc-asl-modern .asl2-chip.is-seeded .asl2-x { color: var(--abc-green); }
.abc-asl-modern .asl2-chev svg.abc-cf-ic { margin-right: 0; margin-left: 2px; transition: transform 0.15s ease; }
.abc-asl-modern [data-abc-asl-filter-toggle][aria-expanded="true"] .asl2-chev svg.abc-cf-ic { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.abc-asl-modern .asl2-chev svg.abc-cf-ic { transition: none; }
}
.abc-asl-modern .asl2-legend-note { margin: 7px 2px 0; font-size: 11.5px; color: var(--abc-muted); }
.abc-asl-modern .asl2-sw {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 5px;
	border-radius: 3px;
	background: var(--abc-green-soft);
	border: 1px solid var(--abc-green);
	vertical-align: -1px;
}

/* ---- the collapsible full grid ---- */
.abc-asl-modern .asl2-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px 14px;
	margin-top: 9px;
	padding: 14px 4px 4px;
	border-top: 1px solid var(--abc-line);
}
.abc-asl-modern .asl2-grid[hidden] { display: none; }
.abc-asl-modern .asl2-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.abc-asl-modern .asl2-field > span { font-size: 12.5px; font-weight: 500; color: var(--abc-ink); }
.abc-asl-modern .asl2-field select, .abc-asl-modern .asl2-field input {
	font: inherit;
	font-size: 13px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--abc-line-strong);
	border-radius: 7px;
	background: var(--abc-surface);
	color: var(--abc-ink);
	width: 100%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.abc-asl-modern .asl2-field input::placeholder { color: var(--abc-muted); }
.abc-asl-modern .asl2-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.abc-asl-modern .asl2-hint { font-size: 12px; color: var(--abc-muted); margin-left: auto; }

/* segmented Furnished switch */


.abc-asl-modern .asl2-seg-opt input { position: absolute; opacity: 0; pointer-events: none; }
.abc-asl-modern .asl2-seg-opt span {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 6px;
	font-size: 12.5px;
	font-weight: 500;
	color: var(--abc-muted);
	cursor: pointer;
}
.abc-asl-modern .asl2-seg-opt input:checked + span { background: var(--abc-surface); color: var(--abc-ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.abc-asl-modern .asl2-seg-opt input:focus-visible + span { outline: 2px solid var(--abc-accent); outline-offset: 1px; }

/* toggle pills (real checkboxes underneath for the no-JS submit) */
.abc-asl-modern .asl2-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.abc-asl-modern .asl2-tgl { position: relative; }
.abc-asl-modern .asl2-tgl input { position: absolute; opacity: 0; pointer-events: none; }
.abc-asl-modern .asl2-tgl span {
	display: inline-block;
	padding: 4px 11px;
	border-radius: 999px;
	border: 1px solid var(--abc-line-strong);
	background: var(--abc-surface);
	color: var(--abc-muted);
	font-size: 10px;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}
.abc-asl-modern .asl2-tgl span:hover { color: var(--abc-ink); border-color: var(--abc-muted); }
.abc-asl-modern .asl2-tgl input:checked + span { background: var(--abc-brand); border-color: var(--abc-brand); color: var(--abc-surface); }
.abc-asl-modern .asl2-tgl input:focus-visible + span { outline: 2px solid var(--abc-accent); outline-offset: 2px; }

/* property-type multi-select dropdown (0.1.46) */
:is(.abc-asl, .abc-asl-modern) .asl2-ms { position: relative; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-btn {
	font: inherit;
	font-size: 13px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid var(--abc-line-strong);
	border-radius: 7px;
	background: var(--abc-surface);
	color: var(--abc-ink);
	width: 100%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
	text-align: left;
}
:is(.abc-asl, .abc-asl-modern) .asl2-ms-btn:focus-visible { outline: 2px solid var(--abc-accent); outline-offset: 1px; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-chev { display: inline-flex; color: var(--abc-muted); transition: transform 0.15s ease; flex: none; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-chev svg { width: 14px; height: 14px; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms.is-open .asl2-ms-chev { transform: rotate(180deg); }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-panel {
	position: absolute;
	top: calc(100% + 5px);
	left: 0;
	right: 0;
	z-index: 40;
	background: var(--abc-surface);
	border: 1px solid var(--abc-line-strong);
	border-radius: 9px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.14);
	padding: 5px;
	max-height: 260px;
	overflow: auto;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
:is(.abc-asl, .abc-asl-modern) .asl2-ms-panel[hidden] { display: none; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 9px;
	border-radius: 6px;
	font-size: 12.5px;
	color: var(--abc-ink);
	cursor: pointer;
}
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt:hover { background: color-mix(in srgb, var(--abc-line) 45%, var(--abc-surface)); }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt input { position: absolute; opacity: 0; pointer-events: none; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt input + span { flex: 1; min-width: 0; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-check { display: none; color: var(--abc-accent); flex: none; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-check svg { width: 14px; height: 14px; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt input:checked ~ .asl2-ms-check { display: inline-flex; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt input:checked + span { font-weight: 600; }
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt:has(input:focus-visible) { outline: 2px solid var(--abc-accent); outline-offset: 1px; }

/* ---- workspace + stock card ---- */
.abc-asl-modern .asl2-ws { margin-top: 14px; }
.abc-asl-modern .asl2-stock {
	border: 1px solid var(--abc-line);
	border-radius: 10px;
	background: var(--abc-surface);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	padding: 0;
}
.abc-asl-modern .asl2-sec-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--abc-line);
}
.abc-asl-modern .asl2-sec-head h3 { margin: 0 0 2px; font-size: 14.5px; }
.abc-asl-modern .asl2-sec-head .small { font-size: 12px; color: var(--abc-muted); }
.abc-asl-modern .asl2-matches-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: 0 0 auto; }
.abc-asl-modern .asl2-matches-sub { font-size: 10px; color: var(--abc-muted); }
.abc-asl-modern .asl2-perpage { margin-top: 2px; }
.abc-asl-modern .asl2-perpage select { padding: 4px 8px; border: 1px solid var(--abc-line-strong); border-radius: 6px; background: var(--abc-surface); font-size: 11.5px; color: var(--abc-ink); cursor: pointer; }
.abc-asl-modern .asl2-nomatch { color: var(--abc-muted); font-weight: 600; }
.abc-asl-modern .asl2-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 2px 2px; }
.abc-asl-modern .asl2-pagebtns { display: inline-flex; gap: 6px; }
.abc-asl-modern .asl2-pagebtns .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }

/* The off-canvas property drawer uses the shared --abc-asl-* tokens; the customer
   page defines them on .abc-asl, the agent workspace is .abc-asl-modern — so map
   them here too, otherwise the agent magnifier drawer renders with wrong colours. */
.abc-asl-modern {
	--abc-asl-bg: #fafafa;
	--abc-asl-surface: #ffffff;
	--abc-asl-ink: #09090b;
	--abc-asl-muted: #71717a;
	--abc-asl-line: #e4e4e7;
	--abc-asl-line-strong: #d4d4d8;
	--abc-asl-accent: #4f7ce0;
	--abc-asl-accent-soft: #edf2fd;
	--abc-asl-soft: #f4f4f5;
	--abc-asl-good: #059669;
}
.abc-asl-modern .asl2-view-btn { color: var(--abc-accent, #4f7ce0); }
.abc-asl-modern .asl2-view-btn svg.abc-cf-ic { width: 15px; height: 15px; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer .asl2-owner { border-top: 1px solid var(--abc-asl-line, #e4e4e7); margin-top: 8px; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer .asl2-owner h3 { display: flex; align-items: center; gap: 7px; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer .asl2-owner h3 svg.abc-cf-ic { width: 15px; height: 15px; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer .asl2-owner-note { margin: 10px 0 0; padding: 10px 12px; background: var(--abc-asl-soft, #f4f4f5); border-radius: 8px; font-size: 13px; line-height: 1.5; color: var(--abc-asl-ink, #09090b); }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer .asl2-cd-note { margin: 10px 0 0; font-size: 11.5px; color: var(--abc-asl-muted, #71717a); }

/* ---- ACF column table ---- */
.abc-asl-modern .asl2-table-wrap { overflow-x: auto; }
.abc-asl-modern .asl2-table { table-layout: fixed; width: 100%; min-width: 1120px; font-variant-numeric: tabular-nums; }
.abc-asl-modern .asl2-table thead th {
	font-weight: 500;
	color: var(--abc-muted);
	text-transform: none;
	letter-spacing: 0;
	padding: 9px 12px;
	border-bottom: 1px solid var(--abc-line);
	background: var(--abc-surface);
}
.abc-asl-modern .asl2-table tbody td { padding: 10px 12px; vertical-align: middle; }
.abc-asl-modern .asl2-table .asl2-c { text-align: center; white-space: nowrap; }
/* Neutralise the legacy 5-column width rules — with 11 columns they squeezed
   everything after column 5 into nothing. */
/* 9 columns since 0.1.60 (Bathrooms + Covered area removed, Ferenc):
   1 Property - 2 Location - 3 Sub-location - 4 Type - 5 Beds - 6 Status -
   7 Price - 8 Match - 9 Actions.
   The two dropped columns (146px) plus a tighter Match/Actions pair go to
   the info columns up front. The total still matches the table's 1120px
   min-width: 320+116+116+116+72+114+96+74+96 = 1120. Keep that sum. */
.abc-asl-modern .asl2-table th:nth-child(1) { width: 320px; }
.abc-asl-modern .asl2-table th:nth-child(2),
.abc-asl-modern .asl2-table th:nth-child(3),
.abc-asl-modern .asl2-table th:nth-child(4) { width: 116px; }
.abc-asl-modern .asl2-table th:nth-child(5) { width: 72px; }
.abc-asl-modern .asl2-table th:nth-child(6) { width: 114px; }
.abc-asl-modern .asl2-table th:nth-child(7) { width: 96px; }
.abc-asl-modern .asl2-table th:nth-child(8) { width: 74px; }
.abc-asl-modern .asl2-table th:nth-child(9) { width: 96px; }
.abc-asl-modern .asl2-table td { overflow: hidden; text-overflow: ellipsis; }
.abc-asl-modern .asl2-table .match-property strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.abc-asl-modern .asl2-th-ic { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.abc-asl-modern .asl2-th-ic svg.abc-cf-ic { width: 14px; height: 14px; color: var(--abc-muted); }
.abc-asl-modern .asl2-sr { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.abc-asl-modern .asl2-table .btn-sm { padding: 4px 9px; }

/* A cell whose value differs from the CUSTOMER'S PROFILE (0.1.98, verstaerkt 0.1.99).
   Steht HIER, im Block der Bestandstabelle, und nicht am Dateiende — Ferenc
   2026-07-27: "ich hoffe die css sitzen schon in dem Bereich Matching."
   Vorher lag die Regel 2.600 Zeilen weiter unten. Das ist nicht nur Ordnung: eine
   Regel am Dateiende ueberstimmt jede Media Query darueber, und genau so hat in
   0.1.90 eine 320px-Spalte den 480px-Breakpoint stillgelegt. Geprueft, dass der
   Umzug nichts kostet: nach dieser Zeile faerbt keine Regel mehr .asl2-table td
   oder .asl2-c (spaeter kommen nur noch Breiten fuer .asl2-beyond), und die
   Zeilen-Hover-Regeln zielen auf die aeltere Klasse .abc-asl-match-table.

   Die Aussage selbst kommt als title-Attribut und wird von denselben
   Kriterien-Objekten entschieden, die die Prozentzahl derselben Zeile gebildet
   haben (abc_asl_listing_deviation_notes) — diese Regel macht sie nur sichtbar.

   FARBE UND CURSOR NUR, mit Absicht: keine Breite, kein Padding, kein display.
   Ein Farbton kann keinen Breakpoint stilllegen, eine Layout-Eigenschaft hier schon.

   Der Ton kommt aus dem Amber selbst statt aus --abc-amber-soft (#fffbeb): das ist
   ein Gelb, das auf Weiss praktisch nicht existiert, weshalb Ferenc das Popup sah,
   aber kein Orange. Die gepunktete Linie sagt "hier steht etwas beim Ueberfahren".

   NACHGERECHNET, nicht geschaetzt: --abc-amber (#b45309) auf diesem 14 %-Ton ergibt
   4,15:1 und faellt damit unter WCAG-AA (4,5) — derselbe Fehler, der bei den
   Source-Badges mit 4,40:1 noch offen steht. 80 % Amber + 20 % Schwarz ergibt
   5,84:1 bei gleichem Farbeindruck. Gehalten von _project/harness/contrasttest.php. */
.abc-asl-modern .asl2-table td.is-off-profile {
	/* KEIN HINTERGRUND (Ferenc 2026-07-27: "das bitte komplett loeschen, keine
	   Hintergrundfarbe"). Die Zelle wird allein ueber Schriftfarbe, Schnitt und
	   die gepunktete Linie markiert — ruhiger in einer Tabelle, in der oft
	   mehrere Zellen je Zeile abweichen. Die Isolations-Regel setzt fuer
	   .match-table td ohnehin background: transparent !important, also bleibt es
	   dabei ohne weiteres Zutun.
	   Kontrast dadurch BESSER, nicht schlechter: dieselbe Schriftfarbe auf Weiss
	   ergibt ~7,1:1 statt der 5,8:1 auf dem frueheren 14-%-Ton.

	   !important auf der SCHRIFTFARBE ist weiterhin lasttragend — gemessen auf
	   stage, nicht vermutet: dieselbe Isolations-Regel setzt auch
	   color: inherit !important, und !important schlaegt jede Spezifitaet. Ohne
	   das !important kam von der Markierung NICHTS an (gemessen: color
	   rgb(9,9,11), identisch mit einer normalen Zelle). Wer es "aufraeumt",
	   schaltet die Markierung wieder ab. Dasselbe Muster hat dieses Stylesheet
	   schon mehrfach getroffen (PROJECT-STATE: die Grey-Span-Falle). */
	color: color-mix(in srgb, var(--abc-amber) 80%, #000) !important;
	font-weight: 600 !important;
	text-decoration: underline dotted color-mix(in srgb, var(--abc-amber) 55%, transparent);
	text-underline-offset: 3px;
	cursor: help;
}

/* ---- selection tray ---- */
.abc-asl-modern .asl2-tray { background: var(--abc-surface); }
.abc-asl-modern .asl2-tray-top { padding: 14px 14px 12px; border-bottom: 1px solid var(--abc-line); }
.abc-asl-modern .asl2-tray-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.abc-asl-modern .asl2-tray-title h3 { margin: 0; font-size: 14.5px; }
.abc-asl-modern .asl2-chipname {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 999px;
	border: 1px solid var(--abc-line);
	background: var(--abc-soft);
	font-size: 10px;
	font-weight: 600;
	color: var(--abc-muted);
	white-space: nowrap;
}
.abc-asl-modern .asl2-tray-info { margin: 8px 0 11px; font-size: 12px; line-height: 1.5; color: var(--abc-muted); }
.abc-asl-modern .asl2-tray-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.abc-asl-modern .asl2-tray-actions .btn, .abc-asl-modern .asl2-tray-actions form { width: 100%; }
.abc-asl-modern .asl2-tray-actions form .btn { width: 100%; }
.abc-asl-modern .asl2-tray-actions .btn { justify-content: center; display: inline-flex; align-items: center; }
.abc-asl-modern .asl2-send-note { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0; font-size: 12px; font-weight: 600; color: var(--abc-asl-good, #059669); opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.2s ease, max-height 0.2s ease; }
.abc-asl-modern .asl2-send-note.is-visible { opacity: 1; max-height: 44px; padding: 8px 10px; background: color-mix(in srgb, var(--abc-asl-good, #059669) 10%, var(--abc-asl-surface, #fff)); border: 1px solid color-mix(in srgb, var(--abc-asl-good, #059669) 35%, var(--abc-asl-surface, #fff)); border-radius: 8px; }
.abc-asl-modern .asl2-send-note.is-error { color: var(--abc-danger, #b42318); }
.abc-asl-modern .asl2-send-note.is-error.is-visible { background: color-mix(in srgb, var(--abc-danger, #b42318) 10%, var(--abc-asl-surface, #fff)); border-color: color-mix(in srgb, var(--abc-danger, #b42318) 35%, var(--abc-asl-surface, #fff)); }
.abc-asl-modern .asl2-send-note span { flex: 1; }
.abc-asl-modern .asl2-send-note__x { flex: 0 0 auto; width: 18px; height: 18px; padding: 0; line-height: 1; font-size: 16px; border: 0; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; opacity: 0.7; }
.abc-asl-modern .asl2-send-note__x:hover { opacity: 1; }

.abc-asl-modern .asl2-stats { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--abc-line); }
.abc-asl-modern .asl2-donut { flex: 0 0 auto; }
.abc-asl-modern .asl2-donut-track { fill: none; stroke: var(--abc-soft); stroke-width: 4; }
.abc-asl-modern .asl2-donut-arc { fill: none; stroke: var(--abc-green); stroke-width: 4; stroke-linecap: round; }
.abc-asl-modern .asl2-donut-num { font-size: 12px; font-weight: 600; fill: var(--abc-ink); font-family: inherit; }
.abc-asl-modern .asl2-stats-txt p { margin: 0 0 4px; font-size: 11.5px; font-weight: 500; color: var(--abc-ink); }
.abc-asl-modern .asl2-legend { display: flex; flex-wrap: wrap; gap: 4px 11px; font-size: 11px; color: var(--abc-muted); }
.abc-asl-modern .asl2-legend-row { display: inline-flex; align-items: center; gap: 5px; }
.abc-asl-modern .asl2-dot { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.abc-asl-modern .asl2-dot-good { background: var(--abc-green); }
.abc-asl-modern .asl2-dot-maybe { background: var(--abc-amber); }
.abc-asl-modern .asl2-dot-no { background: var(--abc-red); }
.abc-asl-modern .asl2-dot-open { background: var(--abc-line-strong); }

.abc-asl-modern .asl2-dropzone {
	margin: 12px 12px 0;
	min-height: 50px;
	border: 1.5px dashed var(--abc-accent-line);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	color: var(--abc-accent);
	font-size: 12px;
	background: var(--abc-accent-soft);
	text-align: center;
	padding: 6px 10px;
}
.abc-asl-modern .asl2-dz-plus {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: 1.5px dashed var(--abc-accent-line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}
.abc-asl-modern .asl2-dz-plus svg.abc-cf-ic { width: 12px; height: 12px; margin: 0; }
.abc-asl-modern .selection-tray.is-drag-over .asl2-dropzone, .abc-asl-modern .asl2-dropzone:hover { border-color: var(--abc-accent); background: color-mix(in srgb, var(--abc-accent) 14%, var(--abc-surface)); }
.abc-asl-modern .selection-tray.is-drag-over .asl2-dz-plus, .abc-asl-modern .asl2-dropzone:hover .asl2-dz-plus { border-color: var(--abc-accent); }

.abc-asl-modern .asl2-tray-list { padding: 12px; }
.abc-asl-modern .asl2-badges { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.abc-asl-modern .selection-tray-item .icon-btn {
	color: var(--abc-accent);
	border-color: var(--abc-accent-line);
	background: var(--abc-surface);
}
/* Kein Farbfeld, nur Rahmen + Icon (Ferenc 2026-07-28). Diese Regel ist mit
   0-4-0 stärker als die allgemeine Button-Regel und muss deshalb dasselbe
   Aussehen selbst mitbringen — sonst fällt genau dieser Bereich aus dem Muster. */
.abc-asl-modern .selection-tray-item .icon-btn:hover { background: var(--abc-surface); color: var(--abc-accent); border-color: var(--abc-accent); }
.abc-asl-modern .selection-tray-item .icon-btn svg.abc-cf-ic { width: 13px; height: 13px; margin: 0; }

/* ---- owner contact dialog ---- */
.abc-asl-modern .asl2-contact-dialog {
	width: min(430px, 92vw);
	border: 1px solid var(--abc-line);
	border-radius: 12px;
	padding: 0;
	background: var(--abc-surface, #ffffff);
	color: var(--abc-ink, #09090b);
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.22);
}
.abc-asl-modern .asl2-contact-dialog::backdrop { background: rgba(24, 24, 27, 0.5); }
.abc-asl-modern .asl2-cd-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
	padding: 16px 18px 12px;
	border-bottom: 1px solid var(--abc-line);
}
.abc-asl-modern .asl2-cd-head h2 { margin: 2px 0 0; font-size: 16px; }
.abc-asl-modern .asl2-cd-body { padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.abc-asl-modern .asl2-cd-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; font-size: 13px; align-items: baseline; }
.abc-asl-modern .asl2-cd-row > span:first-child { color: var(--abc-muted); font-size: 12px; }
.abc-asl-modern .asl2-cd-row a { color: var(--abc-accent); text-decoration: none; word-break: break-all; }
.abc-asl-modern .asl2-cd-row a:hover { text-decoration: underline !important; }
/* Contact-details blob: multi-line free text kept readable (line breaks). */
.abc-asl-modern .asl2-cd-row--details { align-items: start; }
.abc-asl-modern .asl2-cd-details { white-space: pre-line; line-height: 1.5; }
.abc-asl-modern .asl2-cd-note { margin: 4px 0 0; font-size: 11px; color: var(--abc-muted); }
.abc-asl-modern .asl2-cd-row[hidden] { display: none; }

/* ---- customer header refresh (existing D4 markup, zinc treatment) ---- */
.abc-asl-modern .abc-cf-avatar { background: var(--abc-accent-soft); color: var(--abc-accent); }


@media (max-width: 1100px) {
	.abc-asl-modern .asl2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	
}
@media (max-width: 720px) {
	.abc-asl-modern .asl2-grid { grid-template-columns: 1fr; }
	
	.abc-asl-modern .asl2-tray-actions { grid-template-columns: 1fr; }
}

/* ============================================================
   v0.1.26 — customer profile popup + website inquiry form module
   ============================================================ */

/* ---- customer selection page: backend-selected logo (light background) ---- */

:is(.abc-asl, .abc-asl-modern) .abc-asl-customer__brand img { display: block; max-height: 48px; max-width: 260px; width: auto; }

/* ============================================================
   Harden dialog controls against theme/Elementor button styles bleeding in
   (close buttons and dialog tabs). !important is used deliberately here to
   beat Elementor's global `button`/`a.button` rules inside our dialogs.
   ============================================================ */
.abc-asl-modern .abc-cf-x, .abc-asl .abc-cf-x, .abc-asl-modern .dialog-close, .abc-asl .dialog-close {
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-shadow: none;
	background: transparent;
	border: 0;
	border-radius: 8px;
	width: 32px;
	height: 32px;
	min-width: 0;
	padding: 0;
	margin: 0;
	line-height: 1;
	font-size: 22px;
	font-weight: 400;
	color: var(--abc-muted, #71717a);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: none;
	text-transform: none;
	letter-spacing: normal;
}
.abc-asl-modern .abc-cf-x:hover, .abc-asl .abc-cf-x:hover, .abc-asl-modern .dialog-close:hover, .abc-asl .dialog-close:hover {
	background: var(--abc-soft, #f4f4f5);
	color: var(--abc-ink, #09090b);
}
.abc-asl-modern .abc-cf-tab, .abc-asl .abc-cf-tab {
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-shadow: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	min-width: 0;
	text-transform: none;
	letter-spacing: normal;
	transition: none;
}
.abc-asl-modern .abc-cf-tab.is-active, .abc-asl .abc-cf-tab.is-active {
	background: transparent;
	color: var(--abc-ink, #09090b);
	border-bottom-color: var(--abc-brand, #18181b);
}
/* Elementor tends to UPPERCASE and letter-space buttons — neutralise inside dialogs. */
.abc-asl-modern dialog button, .abc-asl dialog button, .abc-asl-modern dialog .btn, .abc-asl dialog .btn {
	text-transform: none !important;
	letter-spacing: normal !important;
}

/* Create/Edit dialog tabs (Search profile | Contact) as underline navigation
   tabs — deliberately a DIFFERENT visual language than the segmented form
   controls so they read as sections, not as an input. Hidden without JS —
   then both sections simply stack with their legends as before. */
:is(.abc-asl, .abc-asl-modern) .abc-cf-tabs { display: none; gap: 4px; padding: 0; background: none; border-bottom: 1px solid var(--abc-line, #e4e4e7); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-form.is-tabbed .abc-cf-tabs { display: flex; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-tab {
	flex: 0 0 auto;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 16px;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	margin-bottom: -1px;
	background: transparent;
	color: var(--abc-muted, #71717a);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
:is(.abc-asl, .abc-asl-modern) .abc-cf-tab:hover { color: var(--abc-ink, #09090b); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-tab.is-active { color: var(--abc-ink, #09090b); border-bottom-color: var(--abc-brand, #18181b); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-tab svg.abc-cf-ic { width: 13px; height: 13px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-tab:focus-visible { outline: 2px solid var(--abc-accent, #4f7ce0); outline-offset: -2px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-form.is-tabbed .abc-cf-section { display: none; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-form.is-tabbed .abc-cf-section.is-active { display: block; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-form.is-tabbed .abc-cf-legend { display: none; }

/* All popups open with a small pop effect: scale up from 94% with a light
   overshoot + fade, backdrop fades in. Covers every dialog (create/edit,
   close customer, owner info, customer profile popup). */
:is(.abc-asl, .abc-asl-modern) .abc-asl-dialog[open] {
	animation: abcDialogPop 0.2s cubic-bezier(0.2, 0.8, 0.3, 1.08);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-dialog[open]::backdrop {
	animation: abcBackdropFade 0.2s ease;
}
@keyframes abcDialogPop {
	from { opacity: 0; transform: scale(0.94) translateY(8px); }
	to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes abcBackdropFade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	:is(.abc-asl, .abc-asl-modern) .abc-asl-dialog[open], :is(.abc-asl, .abc-asl-modern) .abc-asl-dialog[open]::backdrop { animation: none; }
}

/* Segmented switches (Language, Furnished, Availability): a clearly visible
   grey track instead of near-white, and the same 38px height as the input
   fields so the rows line up. */
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg {
	background: color-mix(in srgb, var(--abc-line, #e4e4e7) 55%, var(--abc-surface, #fff));
	border-color: var(--abc-line, #e4e4e7);
	min-height: 38px;
	align-items: stretch;
}
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg-opt { display: flex; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg-opt span { width: 100%; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-seg-opt input:checked + span { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* Icons in the labels of segmented/pill/month fields — same visual system as
   the icons inside the text inputs. */
:is(.abc-asl, .abc-asl-modern) .abc-cf-label { display: inline-flex; align-items: center; gap: 6px; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-req { color: var(--abc-danger, #b42318); font-weight: 700; }
:is(.abc-asl, .abc-asl-modern) .abc-cf-label-ic { display: inline-flex; color: var(--abc-asl-muted, #71717a); }
:is(.abc-asl, .abc-asl-modern) .abc-cf-label-ic svg.abc-cf-ic { width: 12px; height: 12px; display: block; }

/* ---- customer listing drawer (off-canvas): refinement layer ----
   The structural core (position, panel slide, backdrop, image sizing, mobile
   breakpoints, reduced-motion) lives in the !important block earlier in this
   file. Only the rules with no counterpart there live below. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--abc-asl-line, #e4e4e7);
}
/* Bug fix: the core rule forces the <img> display:block !important, so a plain
   [hidden] cannot hide it. Higher specificity + !important wins, so the empty
   "no image" state now actually hides. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__image[hidden] { display: none; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__thumbs {
	display: flex;
	gap: 8px;
	margin-top: 10px;
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x proximity;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__thumbs[hidden] { display: none; }
/* Show ~5 thumbnails at once; the strip scrolls horizontally for the rest.
   basis = (row width - 4 gaps) / 5 so exactly five fit the visible width. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-drawer-thumb {
	flex: 0 0 calc((100% - 32px) / 5);
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 8px;
	overflow: hidden;
	background: var(--abc-asl-soft, #f4f4f5);
	cursor: pointer;
	scroll-snap-align: start;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-drawer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-drawer-thumb.is-active { border-color: var(--abc-asl-accent, #4f7ce0); }
:is(.abc-asl, .abc-asl-modern) .abc-asl-drawer-thumb:focus-visible { outline: 2px solid var(--abc-asl-accent, #4f7ce0); outline-offset: 1px; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__actions .abc-asl-button svg.abc-cf-ic { width: 12px; height: 12px; margin-left: 6px; vertical-align: -1px; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__intro { padding: 22px 0 18px; border-bottom: 1px solid var(--abc-asl-line, #e4e4e7); }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__intro h2 { margin: 0 0 7px; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -0.01em; line-height: 1.15; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__intro p, :is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__section p { margin: 0; color: var(--abc-asl-muted, #71717a); font-size: 14px; line-height: 1.55; }
/* Core forces display:grid + justify-items:end + gap (!important); only the
   cross-axis alignment has no counterpart there. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__actions { align-items: flex-end; }
/* Full spec sheet: a responsive grid of key/value cells. The 1px grid gap on a
   line-coloured container draws clean dividers between every cell (rows AND
   columns), so any number of facts stays tidy. Empty facts are hidden in JS. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 1px;
	border: 1px solid var(--abc-asl-line, #e4e4e7);
	border-radius: 10px;
	overflow: hidden;
	background: var(--abc-asl-line, #e4e4e7);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__facts div {
	display: grid;
	gap: 3px;
	padding: 12px 14px;
	background: color-mix(in srgb, var(--abc-asl-soft, #f4f4f5) 55%, var(--abc-asl-surface, #fff));
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__facts div[hidden] { display: none; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__facts span { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--abc-asl-muted, #71717a); }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__facts strong { font-size: 13.5px; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__section { padding: 20px 0 4px; }
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__section h3 { margin: 0 0 8px; font-size: 15px; }
@media (max-width: 680px) {
	:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__facts div:nth-child(3) { border-left: 0; }
	:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__intro { grid-template-columns: 1fr; }
	:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__actions { align-items: flex-start; }
}

/* Customer-page hero: same card treatment (border, radius, padding) as every
   other container instead of a bare strip with a divider line. */


/* Customer list: compact 11px rows (email line removed — search still matches
   the email via the row's search blob). The CHIPS stay at 10px, deliberately a
   step below the row text — see the .badge block above. */
.abc-asl-modern .shad-table tbody td { font-size: 11px; }
.abc-asl-modern .shad-table .badge { font-size: 10px; }
.abc-asl-modern .shad-table .asl2-c { text-align: right; }

/* Two-list layout: Open customers + Closed customers as separate sections. */
.abc-asl-modern .asl2-list-title {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 22px 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--abc-ink);
}
.abc-asl-modern .asl2-list-title--closed { margin-top: 30px; color: var(--abc-muted); }
/* icon-only Suggest (+) + green "in selection" check in the stock table (0.1.56) */
.abc-asl-modern .asl2-table .asl2-add-btn { padding: 5px 8px; display: inline-flex; align-items: center; justify-content: center; }
.abc-asl-modern .asl2-add-btn svg.abc-cf-ic { width: 15px; height: 15px; }
.abc-asl-modern .asl2-insel { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--abc-green-soft); color: var(--abc-green); margin: 0 auto; }
.abc-asl-modern .asl2-insel svg { width: 15px; height: 15px; }
/* collapsible closed-customers list */
.abc-asl-modern .asl2-closed-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 6px 0; }
.abc-asl-modern .asl2-closed-chev { display: inline-flex; color: var(--abc-muted); transition: transform 0.2s ease; }
.abc-asl-modern .asl2-closed-chev svg.abc-cf-ic { width: 18px; height: 18px; }
.abc-asl-modern .asl2-closed-toggle.is-open .asl2-closed-chev { transform: rotate(180deg); }
.abc-asl-modern .asl2-closed-body[hidden] { display: none; }
.abc-asl-modern .asl2-list-count {
	display: inline-flex;
	align-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--abc-soft);
	color: var(--abc-muted);
	font-size: 11px;
	font-weight: 700;
}
/* The small profile "i" button sits inline with the Dashboard button. */
.abc-asl-modern .shad-actions .icon-btn {
	width: 30px;
	height: 30px;
	border: 1px solid var(--abc-line-strong);
	border-radius: 6px;
	background: var(--abc-surface);
	color: var(--abc-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
/* wie oben: 0-4-0, also muss das Muster hier wiederholt werden */
.abc-asl-modern .shad-actions .icon-btn:hover { background: var(--abc-surface); color: var(--abc-accent); border-color: var(--abc-accent); }
.abc-asl-modern .shad-actions .icon-btn svg.abc-cf-ic { width: 15px; height: 15px; }

/* Duplicate / returning-customer flags under the name. */
/* There are two chip families in this table and they are NOT interchangeable:
   `.badge` says what STATE something is in (status, deal), `.asl2-flag` says
   where a record CAME FROM or what is unusual about it (source, WhatsApp,
   duplicate, returning). Both are pills, so they must look like siblings — but
   they carry different meanings and stay separate classes.
   What was inconsistent was the SHAPE: .badge is inline-flex with a min-height
   and 2px/8px padding, .asl2-flag was inline-block with 1px/7px and a 3px top
   margin, so two chips in one cell sat at different heights and off each other's
   baseline. Aligned here — same box, same size, colours untouched.
   (Ferenc 2026-07-26.) */
.abc-asl-modern .asl2-flag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 19px;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	vertical-align: middle;
}
.abc-asl-modern .asl2-flag--dup { background: var(--abc-amber-soft); color: var(--abc-amber); border: 1px solid var(--abc-amber); }
.abc-asl-modern .asl2-flag--return { background: var(--abc-accent-soft); color: var(--abc-accent-ink); border: 1px solid var(--abc-accent-line); }
/* Lead-source badge under the name (every customer carries one). */
.abc-asl-modern .asl2-flag--source { background: var(--abc-soft); color: var(--abc-ink); border: 1px solid var(--abc-line, rgba(15, 46, 56, .1)); font-weight: 600; }
.abc-asl-modern .asl2-flag--source-single_property { background: var(--abc-accent-soft); color: var(--abc-accent-ink); border: 1px solid var(--abc-accent-line); }
.abc-asl-modern .asl2-flag--source-wishlist { background: var(--abc-amber-soft); color: var(--abc-amber); border: 1px solid var(--abc-amber); }
/* Sits NEXT TO the source badge, not instead of it: where a lead came from and
   how to answer it are two different facts, and the agent needs both. Only drawn
   for WhatsApp — every other lead is email, so saying so would be noise. */
.abc-asl-modern .asl2-flag--wa { display: inline-flex; align-items: center; gap: 4px; margin-left: 5px; background: rgba(37, 211, 102, .12); color: #0d6b34; border: 1px solid rgba(13, 107, 52, .35); font-weight: 600; }
.abc-asl-modern .asl2-flag--wa .abc-wa-ico { width: 12px; height: 12px; flex: none; }
/* The two remaining sources, added 2026-07-25: shortcodes.php emits
   --source-website and --source-agent (the empty source falls back to
   'agent'), but only the two rules above existed — so the TWO MOST COMMON
   badges were the only ones with no style of their own, while the rarer two
   were coloured. Kept deliberately quiet: "General form" is the default a
   dashboard is full of, and an agent-created record is not a lead source at
   all, so neither should shout louder than wishlist or single-property.
   Same specificity as its siblings and placed with them, so nothing later
   in the cascade changes meaning. */
.abc-asl-modern .asl2-flag--source-website { background: var(--abc-soft); color: var(--abc-muted, var(--abc-ink)); border: 1px solid var(--abc-line, rgba(15, 46, 56, .1)); }
.abc-asl-modern .asl2-flag--source-agent { background: transparent; color: var(--abc-muted, var(--abc-ink)); border: 1px dashed var(--abc-line, rgba(15, 46, 56, .18)); }

.abc-asl-modern .asl2-inline-merge { display: inline-flex; margin: 0; }
.abc-asl-modern .asl2-merge-btn {
	background: var(--abc-amber-soft);
	border-color: var(--abc-amber);
	color: var(--abc-amber);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.abc-asl-modern .asl2-merge-btn:hover { background: color-mix(in srgb, var(--abc-amber) 18%, var(--abc-surface)); }
.abc-asl-modern .asl2-merge-btn svg.abc-cf-ic { width: 13px; height: 13px; }
/* Prominent "Back to customer list" — black button with clear icon. */
.abc-asl-modern .detail-page-head { margin-bottom: 18px; }
/* Higher specificity than the generic `.abc-asl-modern button.btn` white fill
   (0,2,1) so the solid black wins — the button also carries the .btn class. */
.abc-asl-modern .asl2-back-btn.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 700;
	background: var(--abc-brand, #18181b);
	color: #ffffff;
	box-shadow: 0 3px 10px rgba(24, 24, 27, 0.34);
	border: 1px solid rgba(255, 255, 255, 0.22);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.abc-asl-modern .asl2-back-btn.btn:hover { background: #000000; }
.abc-asl-modern .asl2-back-btn.btn svg { color: #ffffff !important; }
.abc-asl-modern .asl2-back-btn:hover {
	transform: translateX(-2px);
	box-shadow: 0 5px 14px rgba(24, 24, 27, 0.34);
}
.abc-asl-modern .asl2-back-btn svg.abc-cf-ic { width: 16px; height: 16px; }
/* 0.1.168: von flex-direction:column auf eine umbrechende ZEILE umgestellt.
   Vorher stapelte eine Spalte JEDES Kind untereinander — Name, dann optional
   das Duplikat-/Rückkehrer-Flag darunter —, egal ob es inline oder block ist.
   Ein Sprach-Flaggen-Icon VOR dem Namen (siehe dashboard.php) wäre darin über
   dem Namen gelandet statt daneben, das Gegenteil von „vertikal mittig zum
   Namen". Mit flex-flow:row wrap + align-items:center sitzen Flagge und Name
   nebeneinander und sind exakt zueinander zentriert, ganz ohne Pixel-Werte;
   das Duplikat-/Rückkehrer-Flag zwingt sich per flex-basis:100% weiterhin auf
   eine eigene Zeile darunter (Regel direkt danach) — optisch unverändert wie
   vorher. Die Tabellenzeilenhöhe ändert sich dadurch nicht: eine Zelle ohne
   Flagge/Badge bleibt einzeilig, eine mit Duplikat-Flag bleibt zweizeilig. */
.abc-asl-modern .customer-cell { display: flex; flex-flow: row wrap; align-items: center; gap: 2px 6px; }
.abc-asl-modern .customer-cell > .asl2-flag--dup,
.abc-asl-modern .customer-cell > .asl2-flag--return { flex-basis: 100%; }

/* Die Sprach-Flagge selbst: rund, klein, sitzt in derselben Zelle wie der
   Name (keine eigene Spalte — Ferenc: der Name braucht den Platz). Der
   Text-Rückfall (z.B. „ES") landet im selben Kreis wie das SVG, nur die
   Schrift ist winzig, damit zwei Buchstaben hineinpassen. */
.abc-asl-modern .asl2-lang-flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--abc-soft, #eef1f4);
	/* --abc-ink, nicht --abc-muted: bei 8px (kleiner als die 10px, für die
	   contrasttest.php die Chip-Paare prüft) käme --abc-muted auf --abc-soft nur
	   auf 4.40:1 — unter den geforderten 4.5:1 für kleinen Text. --abc-ink auf
	   demselben Hintergrund liegt bei 16:1, gemessen 2026-07-30. */
	color: var(--abc-ink, #09090b);
	font-size: 8px;
	font-weight: 700;
	letter-spacing: 0.2px;
}
.abc-asl-modern .asl2-lang-flag svg { display: block; width: 100%; height: 100%; }

/* Row action menu (three dots): must paint ABOVE everything else while open,
   and the table containers must not clip it. On narrow screens the wrap
   falls back to horizontal scrolling (menu clipping accepted there). */
.abc-asl-modern .action-menu > div { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14); }
@media (min-width: 1100px) {
	.abc-asl-modern .shad-table-wrap, .abc-asl-modern .shad-table-scroll { overflow: visible; }
}

/* Customer-list toolbar: same card treatment (border, radius, padding) as
   every other container instead of a bare white strip. */
.abc-asl-modern .shad-toolbar {
	border: 1px solid var(--abc-line);
	border-radius: 10px;
	padding: 14px 16px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

:is(.abc-asl, .abc-asl-modern) .abc-asl-message--success {
	border: 1px solid color-mix(in srgb, var(--abc-green, #059669) 40%, transparent);
	background: var(--abc-green-soft, #ecfdf5);
	color: var(--abc-green, #059669);
	border-radius: 8px;
	padding: 12px 14px;
	margin: 0 0 16px;
	font-size: 13.5px;
}

/* "Adjust my search profile" button on the customer selection page */


:is(.abc-asl, .abc-asl-modern) .abc-asl-customer__profile-btn svg.abc-cf-ic { width: 13px; height: 13px; }


/* customer-profile dialog: reuse the agent dialog components; make sure the
   footer buttons look right outside the .abc-asl-modern scope */
:is(.abc-asl, .abc-asl-modern) .abc-cf-dialog .abc-cf-foot .btn {
	font-size: 13px;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 7px;
	border: 1px solid var(--abc-line-strong, #d4d4d8);
	background: var(--abc-surface, #fff);
	color: var(--abc-ink, #09090b);
	cursor: pointer;
}
:is(.abc-asl, .abc-asl-modern) .abc-cf-dialog .abc-cf-foot .btn-primary {
	background: var(--abc-brand, #18181b);
	border-color: var(--abc-brand, #18181b);
	color: #ffffff;
}

/* website inquiry form */
.abc-inquiry { max-width: 860px; margin: 0 auto; }


/* ---- 3-step workspace layout (0.1.48, approved mockup) ----
   Compact identity card + chip profile strip, numbered step markers on the
   existing Filter / Stock / Selection headers, sticky selection tray on
   desktop, visual match bars in the stock table. Pure presentation - every
   field, column, dialog and JS hook of the old layout is untouched. */
.abc-asl-modern .asl3-head { margin-bottom: 6px; }
.abc-asl-modern .asl3-idcard {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 13px 16px;
	background: var(--abc-surface);
	border: 1px solid var(--abc-line);
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 6px 18px rgba(0, 0, 0, 0.05);
}
.abc-asl-modern .asl3-idmeta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.abc-asl-modern .asl3-idname { font-size: 17px; font-weight: 700; line-height: 1.1; }
.abc-asl-modern .asl3-idcontact { display: flex; gap: 14px; flex-wrap: wrap; }
.abc-asl-modern .asl3-idspacer { flex: 1; }
.abc-asl-modern .asl3-editbtn { display: inline-flex; align-items: center; gap: 7px; }

.abc-asl-modern .asl3-stepno {
	width: 24px;
	height: 24px;
	border-radius: 7px;
	background: var(--abc-brand);
	color: var(--abc-surface);
	display: inline-grid;
	place-items: center;
	font-size: 13px;
	font-weight: 700;
	flex: none;
	line-height: 1;
}
.abc-asl-modern .asl3-stephead { display: flex; align-items: center; gap: 10px; min-width: 0; }
.abc-asl-modern .asl2-chipbar .asl3-stepno { margin-right: 2px; }
.abc-asl-modern .asl2-tray-title .asl3-stepno { margin-right: 4px; }

/* sticky selection tray (desktop only; the detail card must not clip it) */
.abc-asl-modern .client-detail-preview { overflow: visible; }
@media (min-width: 1081px) {
	.abc-asl-modern .asl2-tray { position: sticky; top: 14px; }
}

/* ============================================================
   PUBLIC INQUIRY FORM — photographic redesign (0.1.69, Ferenc)

   ONE fixed photo per step — deliberately NOT one per selection. Five
   photos serve both views, so there is no preloading, no flicker, and the
   form is complete with JS off.

   Desktop: photo left over the full height, form right on a plain ground,
   centred and held to ~330px so the lines do not run apart.
   Phone: the SAME photo full-bleed with the choices over it; the dense
   steps get a light card, because white-on-photo cannot carry five fields.

   Both come from ONE DOM placed by grid — no duplicated markup, so a
   change cannot land in one view and miss the other.

   Scoped under .aif (same root as .abc-asl) so the isolation layer below
   protects it. Selection state uses real radio/checkbox inputs via
   :has(:checked) — it works without JS.
   ============================================================ */
/* NO page/panel background is set anywhere in here (Ferenc 2026-07-21): the
   section behind the form is his to style in Elementor, and a plugin colour
   underneath would either fight it or quietly win. What remains coloured are
   COMPONENT surfaces — the option cards, the inputs, the button — because
   those are controls, not background. */
.abc-inquiry.aif {
	--aif-surface: #ffffff; --aif-s2: #F4F0E9; --aif-ink: #0F2E38; --aif-muted: #55686F;
	--aif-line: #E2DBD0; --aif-line-strong: #CFC6B8;
	--aif-sea: #1C6E7E; --aif-sun: #E8A33D; --aif-sun-ink: #22150A;
	/* Straight out of ABC-Logo-white.svg — the red already in the wordmark,
	   so the selected state points at the brand rather than inventing a
	   seventh colour. Used on borders, icons and the tick ONLY, never on
	   running text: #FF3131 on white is 3.4:1, fine for a graphic, short of
	   the 4.5:1 that body text needs. */
	--aif-red: #FF3131;
	/* The Continue / Send button (Ferenc picked variant 1). Fixed values, not
	   tokens that invert: this button is dark with white text in BOTH colour
	   schemes, and an inverting token would put pale text on a pale button. */
	--aif-cta: #0F2E38; --aif-cta-hover: #0A2027; --aif-cta-ink: #ffffff;
	/* Does NOT invert in dark mode, unlike --aif-ink. For text on a surface
	   that is a hard-coded white — the cards over a photo — where an
	   inverting token would put near-white type on white. */
	--aif-ink-fixed: #0F2E38;
	font-size: 15px;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	/* Full-bleed (Ferenc 2026-07-21): the shortcode breaks out of whatever
	   Elementor container it sits in and spans the viewport.

	   Two traps, both hit while building this:
	   1. `.abc-asl` above sets `width: min(1360px, 100%)`. With an explicit
	      width, negative margins only SHIFT the box — they do not widen it.
	      The width has to be overridden, not just the margins.
	   2. `100vw` includes the vertical scrollbar, so it overflows the document
	      by ~15px and hands the page a horizontal scrollbar. --aif-vw is
	      written by the wizard script from documentElement.clientWidth, which
	      excludes it. 100vw stays as the no-JS fallback: slightly wide is a
	      far better failure than not full-bleed at all. */
	width: var(--aif-vw, 100vw);
	max-width: var(--aif-vw, 100vw);
	margin-left: calc(50% - var(--aif-vw, 100vw) / 2);
	margin-right: 0;
}
@media (prefers-color-scheme: dark) {
	.abc-inquiry.aif {
		--aif-surface: #102027; --aif-s2: #16272E; --aif-ink: #E8EDEE; --aif-muted: #93A6AC;
		--aif-line: #1E3840; --aif-line-strong: #2A4A54;
	}
}
/* !important: a theme must never be able to position the honeypot back
   into view, or real visitors start filling it in and get treated as bots. */
/* No blue flash when a choice is tapped. Mobile browsers paint their own
   highlight over the tapped element, which fought every selected state the
   form draws itself. The plugin owns these surfaces, so it owns the feedback
   too — scoped, as everything here must be. */
:is(.abc-asl, .abc-asl-modern, .aif) :is(button, label, a, input, select, summary) {
	-webkit-tap-highlight-color: transparent;
}
.aif .aif-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- image darkening -------------------------------------------------
   A GRADIENT, not a flat wash: near-transparent at the top so the photo
   keeps its light, strong at the bottom where the text sits. A flat wash
   dulls the whole picture to buy readability it only needs at the foot.
   Three levels because photo brightness varies enormously; the same
   classes serve the global setting (on the form) and a single-image
   override (on one .aif-shot), and the nearer declaration wins. */
.aif.aif-dim-light,  .aif .aif-dim-light  { --aif-d1: .06; --aif-d2: .34; --aif-d3: .68; }
.aif.aif-dim-medium, .aif .aif-dim-medium { --aif-d1: .14; --aif-d2: .50; --aif-d3: .85; }
.aif.aif-dim-strong, .aif .aif-dim-strong { --aif-d1: .24; --aif-d2: .66; --aif-d3: .94; }

/* ---- the split ------------------------------------------------------- */
.aif .aif-split {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	position: relative;
	overflow: hidden;
	background: transparent;
	color: inherit;
	/* Full screen, desktop and phone (Ferenc 2026-07-21). No square corners
	   to soften — the frame reaches every edge, so a radius would only cut
	   the photograph.
	   min-height, never height: a tall step (step 3 carries six areas plus
	   the budget card) must be able to grow past the fold instead of being
	   clipped by the overflow:hidden above.
	   dvh second so it wins where supported: on a phone 100vh is the height
	   WITHOUT the browser's address bar, so the last control sits under the
	   chrome until you scroll. dvh tracks the visible viewport. */
	min-height: 100vh;
	min-height: 100dvh;
}
.aif .aif-split[data-aif-photo="1"] { color: #fff; }
.aif .aif-bg { grid-column: 1; grid-row: 1 / -1; position: relative; overflow: hidden; }
.aif .aif-brand { grid-column: 1; grid-row: 1; z-index: 2; padding: 16px 16px 0; }
.aif .aif-pane { grid-column: 1; grid-row: 2; z-index: 2; align-self: end; padding: 16px; min-width: 0; }
.aif .aif-inner { min-width: 0; }

/* ---- the way out ----------------------------------------------------
   Dark on a desktop, where the top right corner sits over the form column,
   and white on a phone, where it sits over the photograph (Ferenc).
   The disc behind the white one is deliberate: the top of the frame is
   exactly where the darkening gradient is weakest — near-transparent by
   design — so a bare white stroke would vanish against a bright sky. It is
   the same problem the logo has, but a 2px X is far more fragile than a
   wordmark.
   44px, because it is a touch target before it is an icon. */
.aif .aif-close {
	position: absolute;
	top: 12px; right: 12px; z-index: 4;
	width: 44px; height: 44px;
	display: grid; place-items: center;
	padding: 0; border: 0; border-radius: 50%;
	background: transparent;
	/* --aif-ink-fixed, not --aif-ink: the plain token flips to near-white in
	   dark mode, and this X sits over the Elementor section, whose colour the
	   plugin does not know. Ferenc asked for "desktop dunkel", so it stays
	   dark in both schemes rather than guessing.
	   If the desktop section is ever styled DARK, this needs flipping to
	   #fff — one line, but it is a manual call, not automatic. */
	color: var(--aif-ink-fixed);
	cursor: pointer;
	transition: background .16s ease, color .16s ease, opacity .16s ease;
	opacity: .75;
}
.aif .aif-close svg { width: 20px; height: 20px; }
.aif .aif-close:hover, .aif .aif-close:focus-visible { opacity: 1; background: rgba(0, 0, 0, .08); }
.aif .aif-close:focus-visible { outline: 2px solid var(--aif-sea); outline-offset: 2px; }

/* Photo layer. --s / --sp / --g arrive inline from PHP; every rule about
   how they are drawn lives here. A step with no photo never sets --s and
   falls through to the colour ground, so the form looks finished from the
   day the module goes live to the day the last photo is uploaded. */
.aif .aif-shot {
	position: absolute;
	inset: 0;
	background-image: var(--sp, var(--s, none));
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity .45s ease;
}
.aif .aif-shot.is-active { opacity: 1; }
.aif .aif-shot::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Neutral black, NOT the ink tone. rgba(8,25,31) is a very dark teal, and
	   over a warm photograph it laid a blue cast over the whole picture —
	   Ferenc spotted it. Black darkens without tinting. */
	background: linear-gradient(180deg,
		rgba(0, 0, 0, var(--aif-d1, .14)) 0%,
		rgba(0, 0, 0, var(--aif-d2, .50)) 55%,
		rgba(0, 0, 0, var(--aif-d3, .85)) 100%);
}
.aif .aif-logo { display: block; max-height: 42px; max-width: 190px; width: auto; }

/* No text-shadow behind the white type (Ferenc 2026-07-21). The darkening
   setting is the lever for a bright photograph instead — if white text is
   hard to read on one of the five, raise that image's own level to "strong"
   in Settings > Inquiry form rather than smudging every headline. */
.aif .aif-split[data-aif-photo="1"] .aif-count { opacity: .85; }

/* The logo stays on EVERY step (Ferenc 2026-07-21). It withdrew after step 1
   until 0.1.76 — but with a photo behind every step it reads as branding that
   belongs there, not as a repetition. (The trust facts that used to sit at the
   foot of the photo were removed on request; the grid is two rows, not three.) */
.aif .aif-brand { transition: opacity .3s ease; }

/* Progress dots. currentColor on purpose: these sit on a photo in one mode
   and on the customer's own Elementor background in the other, so they must
   follow whatever text colour applies rather than pin white or ink. */
.aif .aif-prog { display: flex; align-items: center; gap: 4px; margin-bottom: 14px; }
.aif .aif-prog i { width: 22px; height: 3px; border-radius: 2px; background: currentColor; opacity: .28; flex: 0 0 auto; }
.aif .aif-prog i.is-on { opacity: 1; }
.aif .aif-count { margin-left: auto; font-size: 11px; color: inherit; opacity: .65; font-variant-numeric: tabular-nums; }

/* steps + headings */
.aif .aif-step { display: none; }
.aif .aif-step.is-active { display: block; animation: aifFade .4s cubic-bezier(.22,.61,.36,1); }
@keyframes aifFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.aif .aif-shake { animation: aifShake .4s; }
@keyframes aifShake { 0%,100% { transform: translateX(0); } 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } }
/* The serif carries the whole tone of the redesign, so it is one of the
   deliberate exceptions that must out-weigh the isolation layer: that layer
   forces `font-family: inherit !important` on every h1-h6 to kill theme
   heading fonts, and .aif-qh is an <h2>. Same reason for the weight — the
   kit sets one on headings too. */
.aif .aif-qh {
	font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	font-size: 25px;
	font-weight: 400;
	letter-spacing: -.015em;
	margin: 2px 0 6px;
	line-height: 1.09;
	text-wrap: balance;
}
/* colour: inherit, NOT the muted token — this text sits on limestone on a
   desktop and on a photograph on a phone, and the muted grey disappears
   into the second. */
.aif .aif-qs { font-size: 13.5px; color: inherit; opacity: .78; margin: 0 0 16px; }
.aif .aif-lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; opacity: .72; margin: 15px 0 7px; }
.aif .aif-lbl:first-child { margin-top: 2px; }
.aif .aif-req { color: var(--aif-muted); }
/* 0.1.100: "optional" beside a label, for the three questions that are NOT
   required (Ferenc 2026-07-28). Deliberately NOT called .aif-opt — that name is
   already the big selection CARD further down, and a span carrying it would have
   inherited a border, padding and a flex column. Quieter than the label it
   follows: lower case against the label's uppercase, and no letter-spacing, so
   it reads as an aside rather than a second heading. */
.aif .aif-optional { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .75; }

/* selection cards */
.aif .aif-grid { display: grid; gap: 11px; }
.aif .aif-g2 { grid-template-columns: 1fr 1fr; }
.aif .aif-g3 { grid-template-columns: 1fr 1fr 1fr; }
.aif .aif-opt { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 16px 12px; border: 1.6px solid var(--aif-line); border-radius: 16px; background: var(--aif-surface); transition: border-color .16s, box-shadow .16s, transform .16s, background .16s, color .16s; }
/* ---- one state model for every choosable control -------------------------
   Ferenc 2026-07-21: "komischer Rand beim hover/klick, und wenn ich wieder
   drüberhovere macht es keinen Sinn."
   Two causes, both fixed here:
   1. :focus-within stayed on after a MOUSE click, because clicking a label
      focuses the radio hidden inside it. The cream ring therefore stuck to
      the last-clicked card, and hovering a different one put a second look on
      screen at the same time — the "makes no sense" part.
      :has(input:focus-visible) reacts to the KEYBOARD only, so a click leaves
      no ring behind.
   2. Focus drew a box-shadow ring while hover and checked drew borders, so
      three states fought over the same edge. Focus now uses `outline`, which
      sits outside the border and cannot be confused with it.
   The border WIDTH never changes between states — only its colour — so
   nothing shifts by a pixel as the pointer moves.
   Order matters: rest → hover → checked → focus, so the strongest signal is
   the one the user actually chose. -------------------------------------- */
.aif .aif-opt:hover { border-color: var(--aif-red); }
.aif .aif-opt input { position: absolute; opacity: 0; pointer-events: none; }
.aif .aif-opt:has(input:focus-visible) { outline: 2px solid var(--aif-sea); outline-offset: 2px; }
/* No plate behind the icon (Ferenc, variant G): the glyph sits directly on
   the card and is larger for it. The box is kept for alignment only. */
.aif .aif-opt .aif-ic { width: auto; height: auto; background: none; display: grid; place-items: center; transition: .16s; }
.aif .aif-opt .aif-ic svg { width: 28px; height: 28px; }
/* ---- the grey-span trap ---------------------------------------------------
   `.abc-asl p, .abc-asl span, .abc-asl label span` further up this file paints
   EVERY span inside the plugin root with the CRM's muted grey. It targets the
   span DIRECTLY, so colouring the parent label never competes with it — the
   span must be named. That silently greyed the option labels, the status
   tiles, the bedroom pills, the budget readout and, because the inline SVGs
   are stroked with `currentColor`, every resting icon in the form.
   ANY new span on these surfaces needs a colour here. */
.aif .aif-opt .aif-t,
.aif .aif-row .aif-rt,
.aif .aif-tile > span,
.aif .aif-bpill > span,
.aif .aif-lbl span,
.aif .aif-val,
.aif .aif-opt .aif-ic,
.aif .aif-row .aif-ic,
.aif .aif-tile .aif-tic,
.aif .aif-opt .aif-t { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
/* The line under For Rent / For Sale.
   Its colour is stated OUTRIGHT for each mode rather than inherited: the
   option card does not reliably carry white in photo mode, and `.abc-asl span`
   further up would otherwise claim this span for the CRM grey. Named, not
   inherited — the same lesson as every other span on these surfaces.
   The weight, not the size, carries the hierarchy against the 12px label. */
.aif .aif-opt .aif-sub {
	font-size: 12px; font-weight: 400; line-height: 1.35;
	color: var(--aif-muted); text-wrap: balance; margin-top: -3px;
}
.aif .aif-opt .aif-chk { position: absolute; top: 11px; right: 11px; width: 23px; height: 23px; border-radius: 50%; background: var(--aif-red); display: grid; place-items: center; transform: scale(0); transition: transform .22s cubic-bezier(.34,1.56,.64,1); }
.aif .aif-opt .aif-chk svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; }
/* Selected: a red edge and a red glyph, over the faintest red wash. No heavy
   fill — with the plate gone there is nothing left to invert, and the card
   should not shout louder than the Continue button. */
.aif .aif-opt:has(input:checked) { border-color: var(--aif-red); background: rgba(255, 49, 49, .07); }
.aif .aif-opt:has(input:checked) .aif-ic { background: none; color: var(--aif-red); }
.aif .aif-opt:has(input:checked) .aif-chk { transform: scale(1); }
/* B large centered (step 1) */
.aif .aif-lg { padding: 26px 16px; gap: 13px; }
.aif .aif-lg .aif-ic svg { width: 34px; height: 34px; }
.aif .aif-lg .aif-t { font-size: 16px; font-weight: 800; }
/* F invert (step 2) */
.aif .aif-invert .aif-chk { background: var(--aif-red); }
.aif .aif-invert .aif-chk svg { stroke: #fff; }
/* !important on color: the cards are <label>s and the isolation layer forces
   label { color: inherit !important } to kill kit-coloured labels — which would
   otherwise turn this white selected text dark (invisible on the black card). */
/* .aif-invert used to flip the whole card to solid ink. Variant G replaces
   that with the red edge above, so it now only needs to leave the label alone. */
.aif .aif-invert:has(input:checked) { background: rgba(255, 49, 49, .07); border-color: var(--aif-red); }
.aif .aif-invert:has(input:checked) .aif-ic { background: none; color: var(--aif-red); }

/* A2 pin rows */
.aif .aif-rows { display: flex; flex-direction: column; gap: 9px; }
.aif .aif-row { position: relative; cursor: pointer; display: flex; align-items: center; gap: 13px; border: 1.6px solid var(--aif-line); border-radius: 13px; padding: 13px 15px; background: var(--aif-surface); transition: .15s; }
.aif .aif-row:hover { border-color: var(--aif-red); }
.aif .aif-row input { position: absolute; opacity: 0; pointer-events: none; }
.aif .aif-row:has(input:focus-visible) { outline: 2px solid var(--aif-sea); outline-offset: 2px; }
.aif .aif-row .aif-ic { width: auto; height: auto; background: none; display: grid; place-items: center; flex: 0 0 auto; transition: .15s; }
.aif .aif-row .aif-ic svg { width: 22px; height: 22px; }
.aif .aif-row .aif-rt { flex: 1; font-size: 14.5px; font-weight: 700; }
.aif .aif-row .aif-ck { width: 24px; height: 24px; border-radius: 50%; border: 1.8px solid var(--aif-line-strong); display: grid; place-items: center; flex: 0 0 auto; transition: .15s; }
.aif .aif-row .aif-ck svg { width: 12px; height: 12px; stroke: transparent; stroke-width: 3; }
.aif .aif-row:has(input:checked) { border-color: var(--aif-red); background: rgba(255, 49, 49, .07); }
.aif .aif-row:has(input:checked) .aif-ic { background: none; color: var(--aif-red); }
.aif .aif-row:has(input:checked) .aif-ck { background: var(--aif-red); border-color: var(--aif-red); }
.aif .aif-row:has(input:checked) .aif-ck svg { stroke: #fff; }

/* B4 bedroom icon pills */
.aif .aif-bpills { display: flex; flex-wrap: wrap; gap: 8px; }
/* Unselected sits on a light grey, NOT white (Ferenc 2026-07-21): on the
   white card these were white-on-white and read as barely there. Selected
   goes dark. Same treatment on the status tiles below and on the month
   pills, which are the same component. */
.aif .aif-bpill { position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border: 1.6px solid var(--aif-line); background: var(--aif-s2); border-radius: 12px; padding: 10px 15px; font-size: 14px; font-weight: 700; transition: .15s; }
.aif .aif-bpill:hover { border-color: var(--aif-red); }
.aif .aif-bpill input { position: absolute; opacity: 0; pointer-events: none; }
.aif .aif-bpill:has(input:focus-visible) { outline: 2px solid var(--aif-sea); outline-offset: 2px; }
.aif .aif-bpill:has(input:checked) { background: var(--aif-ink); border-color: var(--aif-ink); color: var(--aif-surface); }
/* Text spans sit inside a <label>; the isolation layer forces
   label { color: inherit !important }, so colour the text spans DIRECTLY
   (they are spans, not labels) to guarantee white text on the black cards. */
.aif .aif-bpill:has(input:checked) span { color: var(--aif-surface); }

/* segmented (furnished, language) */
.aif .aif-seg { display: inline-flex; padding: 4px; gap: 3px; background: var(--aif-s2); border: 1px solid var(--aif-line); border-radius: 12px; }
.aif .aif-segopt { position: relative; }
.aif .aif-segopt input { position: absolute; opacity: 0; pointer-events: none; }
.aif .aif-segopt span { display: block; padding: 9px 20px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--aif-muted); cursor: pointer; transition: .15s; }
.aif .aif-segopt:has(input:checked) span { background: var(--aif-ink); color: var(--aif-surface); }
.aif .aif-segopt:has(input:focus-visible) span { outline: 2px solid var(--aif-sea); outline-offset: 2px; }

/* H status tiles */
.aif .aif-tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 9px; }
.aif .aif-tile { position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 7px; padding: 15px 8px; border: 1.6px solid var(--aif-line); border-radius: 14px; background: var(--aif-s2); transition: .15s; font-size: 12.5px; font-weight: 600; }
.aif .aif-tile:hover { border-color: var(--aif-red); }
.aif .aif-tile input { position: absolute; opacity: 0; pointer-events: none; }
.aif .aif-tile:has(input:focus-visible) { outline: 2px solid var(--aif-sea); outline-offset: 2px; }
.aif .aif-tile .aif-tic svg { width: 22px; height: 22px; }
.aif .aif-tile .aif-chk { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--aif-red); display: grid; place-items: center; transform: scale(0); transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
.aif .aif-tile .aif-chk svg { width: 10px; height: 10px; stroke: #fff; stroke-width: 3; }
/* Selected is dark. It used to be --aif-s2 with a dark border, which is now
   exactly what the UNSELECTED tile looks like — the two states would have
   been told apart by the border alone. */
.aif .aif-tile:has(input:checked) { border-color: var(--aif-ink); background: var(--aif-ink); }
.aif .aif-tile:has(input:checked) > span,
.aif .aif-tile:has(input:checked) .aif-tic { color: var(--aif-surface); }
.aif .aif-tile:has(input:checked) .aif-chk { transform: scale(1); background: var(--aif-surface); }
.aif .aif-tile:has(input:checked) .aif-chk svg { stroke: var(--aif-ink); }

/* Budget slider, redrawn lighter (0.1.69, Ferenc): thin rail, half-
   transparent bars, sea blue instead of black. It shows a PRICE RANGE and
   no longer pretends to be a statistic — the bars are decorative, and
   drawing them boldly claimed data the plugin does not have.
   Note the touch target stays 22px even though the knob reads as 12px: the
   visible dot is the ::before, the hit area is the element. */
.aif .aif-val { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; display: block; margin-bottom: 2px; }
.aif .aif-slider { position: relative; height: 54px; padding-top: 18px; touch-action: none; user-select: none; }
/* The bars were .3 alpha inside a .5-opacity container — about 15% effective,
   which reads as something failing to render rather than as a quiet backdrop.
   They are decoration, so they stay soft, but they have to be visible. */
.aif .aif-bars { position: absolute; inset: 18px 0 15px; display: flex; align-items: flex-end; gap: 2px; }
/* In range: the dark tone the rest of the form uses. Out of range: a neutral
   light grey, so the chosen span is the only thing carrying colour.
   (Ferenc pasted a blue here, but he has twice rejected blue on these
   surfaces — the icon block and the photo overlay — so this uses the dark
   tone instead. One line to change if the blue really was meant.) */
.aif .aif-bars i { flex: 1; background: rgba(0, 0, 0, .10); border-radius: 1px; transition: .1s; }
.aif .aif-bars i.in { background: rgba(15, 46, 56, .55); }
.aif .aif-rail { position: absolute; left: 0; right: 0; bottom: 10px; height: 2px; border-radius: 2px; background: var(--aif-line-strong); }
.aif .aif-fill { position: absolute; bottom: 10px; height: 2px; border-radius: 2px; background: var(--aif-sea); }
.aif .aif-knob { position: absolute; bottom: 11px; width: 22px; height: 22px; border-radius: 50%; background: transparent; border: 0; transform: translate(-50%, 50%); cursor: grab; }
.aif .aif-knob:active { cursor: grabbing; }
.aif .aif-knob::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--aif-sea); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.aif .aif-knob:focus-visible { outline: none; }
.aif .aif-knob:focus-visible::before { box-shadow: 0 0 0 4px rgba(28, 110, 126, .3); }
/* Label and value side by side (Ferenc 2026-07-21): "min: zahl, max: zahl,
   von links nach rechts spart Platz". Stacked, these two boxes took ~90px of a
   phone screen for two numbers. */
.aif .aif-money { display: flex; gap: 10px; margin-top: 12px; }
.aif .aif-box { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; border: 1.6px solid var(--aif-line); border-radius: 12px; padding: 9px 12px; background: var(--aif-s2); cursor: text; transition: .15s; }
.aif .aif-box:focus-within { border-color: var(--aif-ink); background: var(--aif-surface); }
.aif .aif-box small { font-size: 11px; color: var(--aif-muted); font-weight: 600; white-space: nowrap; flex: 0 0 auto; }
.aif .aif-num { border: 0; background: none; outline: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--aif-ink); width: 100%; min-width: 0; padding: 1px 0; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.aif .aif-num::-webkit-outer-spin-button, .aif .aif-num::-webkit-inner-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
/* A placeholder is a hint, not a value: light and unbold, so the field does
   not look filled in when it is empty. */
.aif .aif-num::placeholder { color: var(--aif-muted); opacity: .55; font-weight: 400; }

/* text fields */
.aif .aif-field { margin-bottom: 12px; }
.aif .aif-field label { display: block; font-size: 12.5px; font-weight: 700; margin: 0 0 6px 1px; }
.aif .aif-inp { display: flex; align-items: center; gap: 10px; border: 1.6px solid var(--aif-line); border-radius: 12px; background: var(--aif-s2); padding: 0 13px; transition: .16s; }
.aif .aif-inp:focus-within { border-color: var(--aif-ink); background: var(--aif-surface); }
.aif .aif-inp svg { width: 17px; height: 17px; color: var(--aif-muted); flex: 0 0 auto; }
.aif .aif-inp input { border: 0; outline: none; background: none; font: inherit; color: var(--aif-ink); width: 100%; padding: 13px 0; }
.aif .aif-inp input::placeholder { color: var(--aif-muted); opacity: 1; }

/* footer + buttons */
.aif .aif-foot { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.aif .aif-btn { cursor: pointer; border: 0; font: inherit; font-weight: 700; padding: 13px 22px; font-size: 14.5px; min-height: 0; box-shadow: none; display: inline-flex; align-items: center; gap: 9px; transition: transform .14s, background .15s, color .15s, border-color .15s, opacity .15s; }
.aif .aif-btn:active { transform: scale(.98); }
/* Declared because an undeclared state is exactly the hole an Elementor
   `button:disabled` rule walks through. */
.aif .aif-btn:disabled { opacity: .6; cursor: default; transform: none; }
.aif .aif-btn svg { width: 17px; height: 17px; }
.aif .aif-btn { border-radius: 999px; }
/* Quiet at rest, definite on hover: the border goes to full strength and the
   label with it. It only ever borrows the surrounding text colour, so this
   works white-on-photo and ink-on-card without a second rule. */
.aif .aif-ghost { background: transparent; color: inherit; opacity: .6; border: 1.6px solid currentColor; }
.aif .aif-ghost:hover, .aif .aif-ghost:focus-visible { opacity: 1; border-width: 1.6px; }
/* Solid dark — the quietest of the five variants and the same colour as the
   form's own type, so nothing on the step shouts. Hover deepens it and lifts a
   soft shadow; the click presses it a pixel and drops the shadow again. */
.aif .aif-dark { background: var(--aif-cta); color: var(--aif-cta-ink); margin-left: auto; }
/* Hover/focus/active for both buttons live ONCE, in the interaction-isolation
   layer near the end of this file — they need !important there to out-weigh an
   Elementor kit, and an !important rule always beats a copy here. Two competing
   copies is exactly how the CTA ended up flipping to dark ink in 0.1.69. */

/* success */
.aif .aif-success { text-align: center; padding: 26px 10px 14px; }
.aif .aif-okbadge { width: 66px; height: 66px; border-radius: 50%; background: var(--aif-s2); color: var(--aif-ink); display: grid; place-items: center; margin: 0 auto 16px; }
.aif .aif-okbadge svg { width: 32px; height: 32px; }
.aif .aif-success strong { display: block; font-size: 20px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 7px; }
.aif .aif-success p { color: var(--aif-muted); font-size: 14px; margin: 0 auto; max-width: 36ch; }
/* The way out from the thank-you screen. Same destination as the X above, but
   spelled out: at the end of the form the X is easy to miss, and this is the
   only thing left to do. */
.aif .aif-success .aif-done { display: inline-flex; margin: 20px auto 0; }
.aif .abc-asl-message--error { background: var(--aif-s2); color: var(--aif-ink); border: 1px solid var(--aif-line); border-left: 4px solid var(--aif-sun); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 14px; }

/* availability month picker (revealed for "specific month") */
.aif .aif-months { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.aif .aif-months[hidden] { display: none; }
/* AJAX success reveal */
.aif .aif-pop { animation: aifPop .5s cubic-bezier(.22,.61,.36,1); }
@keyframes aifPop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
/* "Sending…" spinner on the submit button while the request is in flight */
.aif .aif-send.is-sending { opacity: .85; cursor: default; }
/* Refusal from the server, shown in place. Before 2026-07-26 the form simply
   re-posted itself natively and the visitor got a page reload — which also
   counted a second time against the rate limit. Same tone as the
   single-property form's .abc-spi-error so the two read alike. */
.aif .aif-error { margin: 0 0 14px; padding: 10px 13px; font-size: 13.5px; line-height: 1.5; color: #8a1f1f; background: rgba(196, 30, 30, .08); border: 1px solid rgba(196, 30, 30, .25); border-radius: 10px; }
.aif .aif-error[hidden] { display: none; }
.aif .aif-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; display: inline-block; animation: aifSpin .7s linear infinite; }
@keyframes aifSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .aif .aif-spin { animation-duration: 1.6s; } }

/* ---- DESKTOP: photo left over the full height, form right ------------- */
@media (min-width: 861px) {
	.aif .aif-split { grid-template-columns: 40% 1fr; }
	/* Height comes from the 100dvh rule above — nothing to add per breakpoint. */
	.aif .aif-brand { padding: 24px 24px 0; }
	.aif .aif-pane {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: stretch;
		display: grid;
		place-items: center;
		padding: 32px 28px;
	}
	/* The form column never overlays the photo on a desktop, so the white of
	   the photo side must not leak across the split. It takes an explicit ink
	   ONLY in photo mode, where the plugin owns the frame; in plain mode it
	   inherits, because the section behind it is Ferenc's to colour and a
	   pinned ink would vanish on a dark one. */
	.aif .aif-split[data-aif-photo="1"] .aif-pane { color: var(--aif-ink); }
	/* With no photo there is no 40% column to fill, so the form centres in the
	   full-bleed frame instead of hugging an empty left edge. */
	.aif .aif-split:not([data-aif-photo="1"]) { grid-template-columns: 1fr; }
	.aif .aif-split:not([data-aif-photo="1"]) .aif-pane { grid-column: 1; place-items: center; }
	.aif .aif-split:not([data-aif-photo="1"]) .aif-inner { max-width: 560px; }
	/* Centred and held to a readable measure — 480px (Ferenc 2026-07-21; 330
	   was too narrow). Still capped rather than filling the column: across the
	   full 60% the labels and fields run apart and the eye has to jump back to
	   the left on every line. */
	.aif .aif-inner { width: 100%; max-width: 480px; }
	/* The portrait crop is a PHONE asset; a desktop always takes the
	   landscape photo even when both are uploaded. */
	.aif .aif-shot { background-image: var(--s, none); }
}

/* ---- PHONE: the same photo full-bleed, choices over it ---------------- */
@media (max-width: 860px) {
	/* On a phone it sits over the photograph: white, on a soft disc. */
	.aif .aif-close { color: #fff; opacity: .92; }
	.aif .aif-split[data-aif-photo="1"] .aif-close { background: rgba(0, 0, 0, .28); }
	.aif .aif-close:hover, .aif .aif-close:focus-visible { background: rgba(0, 0, 0, .45); }

	/* The dense steps get a light card — bedrooms, furnishing, status, the
	   wish text and the timing are far too much small print for white type
	   on a photograph. Bound to the STEP, not to the JS-set attribute on the
	   form, so this is still right with JS off, where every step is visible
	   at once. */
	.aif .aif-step[data-aif-photo="1"][data-aif-dense],
	.aif .aif-step[data-aif-photo="1"] .aif-card,
	.aif .aif-split[data-aif-photo="1"] .aif-inner > .aif-success {
		background: rgba(255, 255, 255, .96);
		color: var(--aif-ink-fixed);
		border-radius: 14px;
		padding: 14px;
		/* THE WHOLE PALETTE IS RE-PINNED TO ITS LIGHT VALUES IN HERE.
		   This card is a hard-coded white, but every control inside it was
		   drawn with tokens that invert under prefers-color-scheme: dark — so
		   on a phone in dark mode the Min/Max fields, the status tiles, the
		   bedroom pills and the contact inputs all turned into DARK boxes on a
		   WHITE card, with the selected/unselected states reading inverted.
		   Ferenc saw exactly that and described it precisely.
		   Custom properties inherit, so overriding them here fixes every
		   control inside at once — and any control added later. Do not replace
		   this with per-component patches. */
		--aif-surface: #ffffff;
		--aif-s2: #F4F0E9;
		--aif-ink: #0F2E38;
		--aif-muted: #55686F;
		--aif-line: #E2DBD0;
		--aif-line-strong: #CFC6B8;
	}
	

	/* Anything sitting directly ON the photo turns to glass, so the picture
	   carries the mood without costing legibility.
	   SMOKED, not white: white type on a pale glass is only readable while
	   the pixels behind it happen to be dark, and a photo makes no such
	   promise — measured against a light ridge it failed. Darkening the
	   glass makes the contrast a property of the component instead of a
	   property of the photograph.
	   The span selector is not redundant: `.abc-asl span` would otherwise
	   repaint every label grey (see the note further up). */
	/* Label spans by NAME, never a bare `span` with !important: the icon
	   wrapper is a span as well, and this rule would then own the glyph colour
	   in every state and no accent could ever reach it. The icon gets its own
	   white below, so it can still be overridden when selected. */
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row),
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row) :is(.aif-t, .aif-rt) {
		color: #fff;
	}
	/* white at 75% reads as the light grey Ferenc asked for, but on a photo */
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) .aif-opt .aif-sub {
		color: rgba(255, 255, 255, .75);
	}
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row) {
		background: rgba(0, 0, 0, .34);
		border-color: rgba(255, 255, 255, .45);
	}
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row) .aif-ic {
		background: none;
		color: #fff;
	}
	/* The empty tick ring is beige by default (--aif-line-strong) — fine on a
	   light card, but over a photo it reads as a dirty dark circle next to the
	   white pins. It matches the icons here (Ferenc 2026-07-21). */
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) .aif-row .aif-ck {
		border-color: rgba(255, 255, 255, .75);
	}
	/* Variant G over a photo: the tile STAYS glass and simply deepens — the
	   selection is carried by a red edge and a red glyph. The old treatment
	   flipped it to solid white with a blue icon block, which Ferenc rightly
	   called out: it introduced a second accent and hid the photograph. */
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row):has(input:checked) {
		background: rgba(0, 0, 0, .55);
		border-color: var(--aif-red);
	}
	/* The label stays WHITE when selected — the tile no longer turns white
	   underneath it, so the old ink override would have hidden it. */
	/* .aif-t / .aif-rt ONLY, not a bare `span`: the icon wrapper is a span too,
	   and this rule carries !important — it was repainting the red glyph white. */
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row):has(input:checked) :is(.aif-t, .aif-rt) {
		color: #fff;
	}
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row):has(input:checked) .aif-ic {
		background: none;
		color: var(--aif-red);
	}
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) .aif-row:has(input:checked) .aif-ck {
		background: var(--aif-red);
		border-color: var(--aif-red);
	}

	.aif .aif-foot { margin-top: 16px; }
	/* Full-width primary: on a phone this is the only forward move, and it
	   belongs under the thumb. */
	.aif .aif-dark { flex: 1; justify-content: center; }
	.aif .aif-g3 { grid-template-columns: 1fr 1fr; }
	/* Property status stays in ONE row on a phone (Ferenc 2026-07-21). Three
	   choices wrapped 2 + 1 read as a mistake — the orphan looks like it
	   belongs to something else. Padding, gap and label size come down so the
	   row fits without squeezing; the icon carries the recognition. */
	/* minmax(0, 1fr), not 1fr: a plain 1fr track has an AUTO minimum, so the
	   longest label ("Development") makes its column wider than the others and
	   the row comes out ragged. minmax(0, …) removes that floor and the three
	   tiles are identical. */
	.aif .aif-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
	.aif .aif-tile { padding: 11px 4px; gap: 5px; font-size: 11.5px; line-height: 1.2; hyphens: auto; }
	.aif .aif-tile .aif-tic svg { width: 19px; height: 19px; }
	.aif .aif-tile .aif-chk { top: 5px; right: 5px; width: 15px; height: 15px; }

	/* Phone type scale (Ferenc 2026-07-21): body and controls at 14px, nothing
	   above it — except the heading, which he set to 17-18px after seeing 14px
	   flatten the hierarchy. 18px keeps a clear step from the 14px body while
	   staying well below the 25px desktop size. */
	.abc-inquiry.aif { font-size: 14px; }
	.aif .aif-qh { font-size: 18px; line-height: 1.25; margin-bottom: 4px; }
	.aif .aif-qs { font-size: 13px; margin-bottom: 12px; }
	/* Choice labels at 12px (Ferenc 2026-07-21): they are scanned, not read,
	   and the icon does most of the identifying. */
	.aif .aif-opt .aif-t,
	.aif .aif-row .aif-rt,
	.aif .aif-bpill,
	.aif .aif-tile,
	.aif .aif-segopt span { font-size: 12px; }
	/* The button is the one thing on the step that must not shrink. */
	.aif .aif-btn { font-size: 14px; }
	.aif .aif-field label { font-size: 12px; }
	.aif .aif-success strong { font-size: 14px; }
	/* 16px on the TEXT ENTRY fields on purpose, against the 12/14 scale above:
	   iOS Safari zooms the whole page in when a focused input is under 16px,
	   and the visitor then has to pinch back out mid-form. This is the one
	   place where the type size is a usability question, not a visual one. */
	.aif .aif-inp input, .aif .aif-num { font-size: 16px; }
}

@media (max-width: 420px) {
	.aif .aif-g2, .aif .aif-g3 { grid-template-columns: 1fr 1fr; }
	/* .aif-tiles deliberately NOT listed: it must stay in one row here too.
	   Only the padding comes down — the label stays on the 12px choice scale
	   with everything else rather than becoming the one odd size. */
	.aif .aif-tile { padding: 10px 3px; }
	/* No font-size for .aif-qh here: this block sits AFTER the phone scale
	   above, so a value here would silently win and put the heading back over
	   14px. The phone scale is the single place that owns type size. */
	.aif .aif-brand, .aif .aif-pane { padding-left: 13px; padding-right: 13px; }
}

/* Standalone success (the no-JS redirect landing, outside the form). No
   background of its own — it sits on whatever the section is styled with. */
.abc-inquiry.aif > .aif-success { padding: 40px 24px 34px; }
@media (prefers-reduced-motion: reduce) { .aif * { animation: none !important; transition: none !important; } }

/* ============================================================
   THEME/ELEMENTOR ISOLATION LAYER (0.1.47) - Ferenc 2026-07-20:
   ONLY plugin CSS may style the plugin surfaces. Two mechanisms:
   1. Every selector in this file is scoped under a plugin root
      (.abc-asl / .abc-asl-modern) - the scope pass lifts each rule above
      Elementor-kit specificity (.elementor-kit-N button) AND stops generic
      plugin class names (.btn, .badge, .kicker) from leaking onto the page.
   2. This block force-neutralises the classic element-level bleed vectors
      (uppercase buttons, letter-spaced inputs, gradient buttons, underlined
      links, theme heading fonts/colors) that component rules do not always
      re-declare. All values here are ones the plugin NEVER varies on these
      elements - verified before adding each property.
   RULE FOR ALL FUTURE WORK ON THIS PLUGIN: never write an unscoped
   selector; give every new element a class and explicit plugin styling;
   when a new element type appears, extend this layer.
   (Deliberate exceptions carry !important on their own rule: the
   .asl2-cd-row a:hover underline and the .abc-cf-head-txt h2 color.
   .abc-asl-stock-drag-preview stays unscoped - JS appends it to body.)
   ============================================================ */
:is(.abc-asl, .abc-asl-modern) :is(button, input, select, textarea) {
	font-family: inherit !important;
	font-style: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-shadow: none !important;
	background-image: none !important;
	text-decoration: none !important;
}
:is(.abc-asl, .abc-asl-modern) a {
	text-shadow: none !important;
	text-decoration: none !important;
}
:is(.abc-asl, .abc-asl-modern) :is(h1, h2, h3, h4, h5, h6) {
	font-family: inherit;
	font-style: normal;
	color: inherit;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: none;
}
:is(.abc-asl, .abc-asl-modern) :is(table, th, td) {
	font-family: inherit;
	border-spacing: 0;
}
:is(.abc-asl, .abc-asl-modern) :is(p, span, label, li) {
	text-shadow: none;
}
/* Labels: the plugin uppercases/colours label CHILD spans, never the label
   itself - inherit/none beats the kit's red uppercase label styling. */
:is(.abc-asl, .abc-asl-modern) label {
	letter-spacing: normal !important;
	text-transform: none !important;
	color: inherit !important;
}
/* Controls whose height comes from height/padding - a kit min-height (55-60px)
   must never inflate them. Plugin controls that DO use min-height (.btn 27px,
   .form-field 34px, legacy 40px) are deliberately NOT in this list. */
:is(.abc-asl, .abc-asl-modern) .asl2-field :is(select, input),
:is(.abc-asl, .abc-asl-modern) .asl2-ms-btn,
:is(.abc-asl, .abc-asl-modern) .abc-cf-input :is(input, select, textarea),
:is(.abc-asl, .abc-asl-modern) .abc-cf-x,
:is(.abc-asl, .abc-asl-modern) .abc-cf-tab,
:is(.abc-asl, .abc-asl-modern) .dialog-close,
:is(.abc-asl, .abc-asl-modern) .abc-asl-icon-button {
	min-height: 0;
}
/* Flat controls - the plugin never shadows these (kit purple glow). */
:is(.abc-asl, .abc-asl-modern) .btn,
:is(.abc-asl, .abc-asl-modern) .abc-cf-x,
:is(.abc-asl, .abc-asl-modern) .dialog-close,
:is(.abc-asl, .abc-asl-modern) .abc-asl-icon-button {
	box-shadow: none;
}
/* Spot fixes verified by the computed-style audit (preview + simulated
   Elementor kit, AN/AUS diff over every element in the plugin roots):
   properties no component rule sets on these elements, forced back to the
   plugin baseline so kit rules cannot fill the gap. */
:is(.abc-asl, .abc-asl-modern) .asl2-chip,
:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb,
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link,
:is(.abc-asl, .abc-asl-modern) .asl2-perpage select {
	box-shadow: none;
	min-height: 0;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-button,
:is(.abc-asl, .abc-asl-modern) .abc-asl-choice-group button {
	box-shadow: none;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link {
	border-radius: 0;
}
:is(.abc-asl, .abc-asl-modern) .asl2-perpage {
	color: inherit;
}
/* The drawer backdrop is a transparent full-size button with no visible
   content - pin every kit-targetable box property so the audit stays at 0. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-listing-drawer__backdrop {
	padding: 0;
	min-height: 0;
	color: transparent;
	font-size: 0;
}

/* ==========================================================================
   INTERACTION-STATE ISOLATION (0.1.57)
   --------------------------------------------------------------------------
   The isolation layer above only ever pinned the RESTING state. Two holes
   followed from that:

   (a) Where the plugin declares no :hover at all, an Elementor kit rule
       (.elementor-kit-N button:hover) has no competitor and wins outright -
       specificity is irrelevant when nothing is there to out-rank.
   (b) Focus was styled with :focus-visible throughout. A MOUSE CLICK fires
       :focus but NOT :focus-visible, so on click no plugin rule matched and
       the kit's button:focus took over.

   Everything below is 0,3,0 (or !important where the resting rule already
   is), which beats the kit's 0,2,1. Components whose resting rule already
   carries !important (.btn, .dialog-close, .abc-cf-x) are intentionally not
   repeated here - !important holds through every state.
   ========================================================================== */

/* (b) Mouse-click focus must not inherit a kit focus ring. :focus-visible
   keeps the keyboard ring; this only neutralises the click case. */
:is(.abc-asl, .abc-asl-modern) :is(button, a, input, select, textarea):focus:not(:focus-visible) {
	outline: none !important;
	box-shadow: none !important;
}

/* (a) .aif-btn - the public inquiry form's Send/Back buttons.
   The two rules that stood here were written in 0.1.65, when .aif-dark was
   dark ink and the form had one fixed light background. Both premises died
   with the 0.1.69 redesign, and both rules then did active harm:
     - .aif-dark was forced back to ink, undoing the amber CTA on hover AND
       on focus, so it stayed dark after every click;
     - .aif-ghost was forced to dark ink, and that button sits on a dark
       photograph in photo mode, so tabbing or tapping "Back" erased it.
   Both are now handled at the end of this layer, mode-aware. Nothing is
   needed here: .aif-dark and .aif-ghost both declare their own resting
   background, so there is no kit hole of the kind note (a) describes. */

/* (a) .abc-asl-icon-button - the drawer close button. Had no :hover, :focus
   or :active anywhere in this file. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-icon-button:hover,
:is(.abc-asl, .abc-asl-modern) .abc-asl-icon-button:focus-visible {
	background: #fff;
	color: var(--abc-asl-accent, #4f7ce0);
	border-color: var(--abc-asl-accent, #4f7ce0);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-icon-button:focus:not(:focus-visible) {
	background: #fff;
	color: var(--abc-asl-ink);
	border-color: var(--abc-asl-line);
}

/* (a) The customer name in the list is a <button> styled as a link, so the
   blanket a:hover rule does not cover it. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link:hover,
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link:focus-visible {
	background: transparent;
	color: var(--abc-asl-accent, #4f7ce0);
}

/* (a) Property-type multi-select trigger: resting state only, no !important. */
:is(.abc-asl, .abc-asl-modern) .asl2-ms-btn:hover,
:is(.abc-asl, .abc-asl-modern) .asl2-ms-btn:focus {
	background: var(--abc-surface);
	color: var(--abc-ink);
	border-color: var(--abc-line-strong);
}

/* Property-type multi-select inside the CUSTOMER FORM dialogs (0.1.58,
   reworked 0.1.61).
   It deliberately does NOT use .abc-cf-input: that is a flex ROW built for a
   single inline control, and this one needs a block because its panel expands
   underneath. The field icon lives inside the toggle button instead.
   The stock filter's dropdown is absolutely positioned, which is fine there.
   In a dialog it sits inside .abc-cf-body, a scroll container, where an
   absolute panel would be clipped - so here it is a normal block that expands
   the field and lets the dialog body scroll. That also keeps it usable with
   no JS (the panel renders open). */
:is(.abc-asl, .abc-asl-modern) .abc-cf-msfield {
	display: block;
	min-width: 0;
}
:is(.abc-asl, .abc-asl-modern) .abc-cf-msfield .asl2-ms-btn {
	height: 38px;
	gap: 9px;
	border-radius: 10px;
	padding: 7px 11px;
	background: color-mix(in srgb, var(--abc-bg, #f6f4f1) 40%, var(--abc-surface, #fff));
}
:is(.abc-asl, .abc-asl-modern) .abc-cf-msfield .asl2-ms-btn > svg.abc-cf-ic {
	width: 15px;
	height: 15px;
	flex: none;
	margin: 0;
	vertical-align: baseline;
	color: var(--abc-muted);
}
:is(.abc-asl, .abc-asl-modern) .abc-cf-msfield .asl2-ms-label {
	flex: 1;
	text-align: left;
}
/* 0.1.63: the panel used to be `position: static` here, which EXPANDED the
   field and shoved every field below it down - Ferenc: "drueckt alles im Popup
   nach unten, das ist nicht sauber". It is now FIXED and positioned against
   the button by JS (setupTypeMultiSelect), so it overlays like a normal
   dropdown, never pushes layout, and cannot be clipped by .abc-cf-body's
   overflow. JS sets left/top/width inline; these are the fallbacks for the
   no-JS state, where the panel renders open underneath the button. */
:is(.abc-asl, .abc-asl-modern) .abc-cf-msfield .asl2-ms-panel {
	position: static;
	margin-top: 6px;
	box-shadow: none;
	max-height: 200px;
}
:is(.abc-asl, .abc-asl-modern) .abc-cf-msfield .asl2-ms-panel.is-floating {
	position: fixed;
	/* MUST reset the offsets the absolute base rule sets (top: calc(100% + 5px);
	   left: 0; right: 0). Under `fixed`, 100% is the VIEWPORT height, so that
	   stale `top` resolved to the bottom edge of the screen and, together with
	   the `bottom` JS sets when flipping upwards, over-constrained the box and
	   collapsed it to a 12px sliver. JS supplies left/width and exactly one of
	   top/bottom - everything else has to be auto. */
	top: auto;
	right: auto;
	bottom: auto;
	margin-top: 0;
	max-height: 260px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
	z-index: 60;
}

/* Closed-customers block as ONE white card (0.1.59, Ferenc).
   Before: the toggle was a bare button on the page background and only the
   expanded table was a card, so the header floated and the padding did not
   match the other sections. Now header + body share a card and the header
   uses the same 14px/16px as .asl2-sec-head. */
:is(.abc-asl, .abc-asl-modern) .asl2-closed {
	margin-top: 30px;
	border: 1px solid var(--abc-line);
	border-radius: 10px;
	background: var(--abc-surface);
	box-shadow: var(--abc-shadow);
	overflow: hidden;
}
:is(.abc-asl, .abc-asl-modern) .asl2-closed .asl2-closed-toggle {
	margin: 0;
	padding: 14px 16px;
	border-radius: 10px;
}
/* Separator only while open, so the collapsed card stays a clean single block. */
:is(.abc-asl, .abc-asl-modern) .asl2-closed .asl2-closed-toggle.is-open {
	border-bottom: 1px solid var(--abc-line);
	border-radius: 10px 10px 0 0;
}
/* No card-in-card: the table wrapper drops its own frame inside this card.
   Needs !important because the dashboard rule that paints every .shad-table-wrap
   as a card is itself !important. */
:is(.abc-asl, .abc-asl-modern) .asl2-closed .shad-table-wrap {
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

/* Stock table "Actions" column (0.1.60, Ferenc): magnifier + suggest/check
   side by side. The magnifier moved here out of the Property cell. */
:is(.abc-asl, .abc-asl-modern) .asl2-rowactions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}
/* The <form> around the suggest button must not act as a block that offsets
   the pair - it only carries the POST fallback. */
:is(.abc-asl, .abc-asl-modern) .asl2-rowactions form {
	margin: 0;
	display: flex;
}
/* The + looked off-centre because the button was a padded RECTANGLE while the
   magnifier is a 27x27 square: same icon, two different boxes. Make it the
   same square and centre by construction rather than by padding arithmetic. */
:is(.abc-asl, .abc-asl-modern) .asl2-rowactions .asl2-add-btn {
	width: 27px;
	height: 27px;
	min-height: 0;
	padding: 0 !important;
	display: inline-grid;
	place-items: center;
	border-radius: 5px;
}
:is(.abc-asl, .abc-asl-modern) .asl2-rowactions .asl2-add-btn svg.abc-cf-ic {
	width: 15px;
	height: 15px;
	/* `.btn svg.abc-cf-ic` carries margin-right: 5px + vertical-align: -2px so
	   an icon sits nicely BEFORE a text label. This button has no label, so
	   that phantom gap pushed the + 2.5px left of centre - which is exactly the
	   off-centre plus that was reported. Zero it for icon-only buttons. */
	margin: 0;
	vertical-align: baseline;
}
/* The "in selection" check takes the same footprint so rows never jump. */
:is(.abc-asl, .abc-asl-modern) .asl2-rowactions .asl2-insel {
	width: 27px;
	height: 27px;
	margin: 0;
}

/* Suggest vs "in selection" (0.1.60): both are rendered, one is shown.
   Driven purely by the row's is-added class, so JS never rebuilds markup —
   which keeps the magnifier in the cell and keeps the form's nonce intact
   for the no-JS fallback. */
:is(.abc-asl, .abc-asl-modern) .asl2-rowactions .asl2-insel { display: none; }
:is(.abc-asl, .abc-asl-modern) tr.is-added .asl2-rowactions .asl2-insel { display: inline-grid; place-items: center; }
:is(.abc-asl, .abc-asl-modern) tr.is-added .asl2-rowactions form { display: none; }

/* Sub-locations indented under their region in the area multi-select (0.1.61),
   mirroring what the old <select> did with optgroups. */
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt--child { padding-left: 22px; }

/* Option rows must not inherit the field-LABEL styling (restored 0.1.61 — this
   fix was written in 0.1.58 and accidentally sliced out when the multi-select
   block above was rewritten).
   `.abc-asl-form label span` (uppercase + 700 + 12px) exists for field labels,
   but it hits every span inside every label in the form, and each option row IS
   a <label>. The stock filter never showed it because its form is .asl2-filter,
   not .abc-asl-form. Specificity: legacy (0,2,2) < this (0,3,1). */
:is(.abc-asl, .abc-asl-modern) .asl2-ms-panel .asl2-ms-opt span {
	text-transform: none;
	letter-spacing: normal;
	font-size: 13px;
	font-weight: 500;
}
:is(.abc-asl, .abc-asl-modern) .asl2-ms-panel .asl2-ms-opt input:checked + span {
	font-weight: 600;
}

/* Agent dashboard notice (0.1.63). The dashboard only set a margin, so a saved
   change and a security failure looked identical - and the message was easy to
   miss entirely. Success and error now read at a glance. */
.abc-asl-modern .abc-asl-message {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 500;
}
.abc-asl-modern .abc-asl-message--success {
	border: 1px solid color-mix(in srgb, var(--abc-green) 40%, transparent);
	background: var(--abc-green-soft);
	color: var(--abc-green);
}
.abc-asl-modern .abc-asl-message--error {
	border: 1px solid color-mix(in srgb, var(--abc-danger) 40%, transparent);
	background: var(--abc-danger-soft);
	color: var(--abc-danger);
}

/* ==========================================================================
   INTERACTION-STATE ISOLATION, ROUND 2 (0.1.64)
   --------------------------------------------------------------------------
   Ferenc reported the Elementor hover colour appearing "egal wo ich
   rueberhover". 0.1.57 covered four components and I wrongly assumed that was
   the whole set.

   Two things had to change:
   (a) A component with NO :hover rule is unprotected - already known.
   (b) A component WITH a :hover rule can still leak, because a rule only
       protects the properties it DECLARES. .asl3-morebtn:hover set `color`
       alone, so a kit rule setting background-color still came through. That
       is the one Ferenc kept seeing on "+ N more" and on the closed-customers
       bar.

   This block uses !important instead of trying to out-specify the kit. A
   measured audit showed my specificity reasoning was not reliable enough to
   bet on, and !important beats any non-important kit rule outright - which is
   exactly why .btn and .dialog-close never leaked in the first place.

   Verified by a hostile-kit audit: a simulated aggressive Elementor kit is
   loaded, and for every interactive element the winning rule for
   background-color / color / border-color in the hover, focus and active
   states is resolved. Target: zero kit wins.
   ========================================================================== */

/* --- agent dashboard: solid buttons ------------------------------------- */
/* THE OUTLINE BUTTONS NOW ANSWER (Ferenc 2026-07-28: "haben kein hover …
   da braucht es auch eine Farbe, evtl. ein schönes Blau").

   Until now this rule repeated the RESTING values on :hover/:focus/:active. That
   was not an oversight: 0.1.64 needed to stop Elementor painting our buttons
   pink, and setting them back to their own look was the quickest way to do it.
   The side effect was that our buttons stopped answering the pointer at all.

   Since 0.1.120 the stylesheet is printed after the theme, so the theme is held
   off by ordering alone — the values here are free to be a real hover again.
   They use the accent that .icon-btn:hover has always used, so both kinds of
   button now behave the same.

   NO FILL (Ferenc 2026-07-28: "die Rahmen-Buttons sollen nicht gefüllt werden,
   sondern der Rahmen und Icon in dieser Farbe"). The surface stays white; only
   the outline and the label/icon take the accent. */
:is(.abc-asl, .abc-asl-modern) .btn:hover,
:is(.abc-asl, .abc-asl-modern) .btn:focus-visible {
	background: var(--abc-surface, #fff);
	color: var(--abc-accent, #4f7ce0);
	border-color: var(--abc-accent, #4f7ce0);
}
/* A MOUSE click must leave nothing behind (Ferenc 2026-07-21: "komischer Rand
   beim hover/klick"). :focus-visible above answers the keyboard; this puts a
   mouse-focused button back to rest, so no highlight sticks to the last thing
   clicked. */
:is(.abc-asl, .abc-asl-modern) .btn:focus:not(:focus-visible) {
	background: var(--abc-surface, #fff);
	color: var(--abc-ink, #09090b);
	border-color: var(--abc-line-strong, #d4d4d8);
}
/* The dark action buttons keep their colour and simply deepen — they are
   already the loudest thing on the screen, so they must not turn blue. */
:is(.abc-asl, .abc-asl-modern) .btn.btn-primary:hover,
:is(.abc-asl, .abc-asl-modern) .btn.btn-primary:focus-visible,
:is(.abc-asl, .abc-asl-modern) .btn.btn-primary:active {
	background: var(--abc-brand-dark, #000);
	color: #ffffff;
	border-color: var(--abc-brand-dark, #000);
}
:is(.abc-asl, .abc-asl-modern) .asl2-back-btn:hover,
:is(.abc-asl, .abc-asl-modern) .asl2-back-btn:focus,
:is(.abc-asl, .abc-asl-modern) .asl2-back-btn:active {
	background: var(--abc-brand, #18181b);
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.22);
}

/* --- agent dashboard: icon and text buttons ------------------------------ */
/* Same treatment as .btn above, and for the same reason. This rule already
   coloured the icon, but the border went to --abc-accent-line (#c5d4f6) — so
   pale against the resting #e4e4e7 that the button read as not answering at
   all. Full accent on the border, no fill. */
:is(.abc-asl, .abc-asl-modern) .icon-btn:hover,
:is(.abc-asl, .abc-asl-modern) .icon-btn:focus-visible {
	background: var(--abc-surface);
	color: var(--abc-accent);
	border-color: var(--abc-accent);
}
:is(.abc-asl, .abc-asl-modern) .icon-btn:focus:not(:focus-visible) {
	background: var(--abc-surface);
	color: var(--abc-ink, #09090b);
	border-color: var(--abc-line-strong, #d4d4d8);
}
:is(.abc-asl, .abc-asl-modern) .asl3-editbtn:hover,
:is(.abc-asl, .abc-asl-modern) .asl3-editbtn:focus,
:is(.abc-asl, .abc-asl-modern) .asl3-editbtn:active,
:is(.abc-asl, .abc-asl-modern) .asl3-morebtn:hover,
:is(.abc-asl, .abc-asl-modern) .asl3-morebtn:focus,
:is(.abc-asl, .abc-asl-modern) .asl3-morebtn:active {
	background: transparent;
	color: var(--abc-accent-hover);
	border-color: transparent;
}
:is(.abc-asl, .abc-asl-modern) .asl2-closed-toggle:hover,
:is(.abc-asl, .abc-asl-modern) .asl2-closed-toggle:focus,
:is(.abc-asl, .abc-asl-modern) .asl2-closed-toggle:active {
	background: transparent;
	color: var(--abc-muted);
	border-color: transparent;
}
:is(.abc-asl, .abc-asl-modern) .asl2-ms-btn:hover,
:is(.abc-asl, .abc-asl-modern) .asl2-ms-btn:focus,
:is(.abc-asl, .abc-asl-modern) .asl2-ms-btn:active {
	background: color-mix(in srgb, var(--abc-bg, #f6f4f1) 40%, var(--abc-surface, #fff));
	color: var(--abc-muted);
	border-color: var(--abc-line-strong);
}
:is(.abc-asl, .abc-asl-modern) .abc-cf-tab:hover,
:is(.abc-asl, .abc-asl-modern) .abc-cf-tab:focus,
:is(.abc-asl, .abc-asl-modern) .abc-cf-tab:active,
:is(.abc-asl, .abc-asl-modern) .abc-cf-x:hover,
:is(.abc-asl, .abc-asl-modern) .abc-cf-x:focus,
:is(.abc-asl, .abc-asl-modern) .abc-cf-x:active,
:is(.abc-asl, .abc-asl-modern) .dialog-close:hover,
:is(.abc-asl, .abc-asl-modern) .dialog-close:focus,
:is(.abc-asl, .abc-asl-modern) .dialog-close:active {
	background: transparent;
	border-color: transparent;
}
:is(.abc-asl, .abc-asl-modern) .brand:hover,
:is(.abc-asl, .abc-asl-modern) .brand:focus,
:is(.abc-asl, .abc-asl-modern) .brand:active {
	background: transparent;
	color: var(--abc-muted);
	border-color: transparent;
}
:is(.abc-asl, .abc-asl-modern) .asl2-chip:hover,
:is(.abc-asl, .abc-asl-modern) .asl2-chip:focus,
:is(.abc-asl, .abc-asl-modern) .asl2-chip:active {
	background: var(--abc-green-soft);
	color: var(--abc-green);
	border-color: color-mix(in srgb, var(--abc-green) 45%, transparent);
}

/* --- customer-facing surfaces -------------------------------------------- */
:is(.abc-asl, .abc-asl-modern) .abc-asl-button:hover,
:is(.abc-asl, .abc-asl-modern) .abc-asl-button:focus,
:is(.abc-asl, .abc-asl-modern) .abc-asl-button:active,
:is(.abc-asl, .abc-asl-modern) .abc-asl-icon-button:hover,
:is(.abc-asl, .abc-asl-modern) .abc-asl-icon-button:focus,
:is(.abc-asl, .abc-asl-modern) .abc-asl-icon-button:active {
	background: #fff;
	color: var(--abc-asl-ink);
	border-color: var(--abc-asl-line-strong);
}
/* Same two corrections on the customer-facing side, so a client's selection page
   answers the pointer exactly like the dashboard: the dark button deepens, the
   outlined "details" link takes the accent on its border and text, no fill. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary:hover,
:is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary:focus-visible,
:is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary:active {
	background: var(--abc-asl-brand-dark, #000);
	color: #fff;
	border-color: var(--abc-asl-brand-dark, #000);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-button--primary:focus:not(:focus-visible) {
	background: var(--abc-asl-brand);
	color: #fff;
	border-color: var(--abc-asl-brand);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link:hover,
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link:focus-visible {
	background: transparent;
	color: var(--abc-asl-accent, #4f7ce0);
	border-color: var(--abc-asl-accent, #4f7ce0);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item__details-link:focus:not(:focus-visible) {
	background: transparent;
	color: var(--abc-asl-ink);
	border-color: transparent;
}

/* --- public inquiry form --------------------------------------------------
   These rules exist to out-weigh an Elementor kit's button:hover. They must
   pin only what the kit could steal, and NOTHING that the form varies by
   mode — an !important here beats every mode rule above, whatever its
   specificity, because those are normal-weight.
   Two bugs lived here until 0.1.70, both from this layer being written in
   0.1.65 when .aif-dark was still dark ink:
     - it forced the amber CTA back to ink on hover AND on focus, so the
       button stayed dark after every click;
     - it forced dark ink onto the ghost button, which sits on a dark
       photograph in photo mode and became invisible on tap. */
.aif .aif-dark:hover,
.aif .aif-dark:focus {
	background: var(--aif-cta-hover);
	color: var(--aif-cta-ink);
	border-color: var(--aif-cta-hover);
	box-shadow: 0 4px 14px rgba(10, 32, 39, .28);
}
.aif .aif-dark:active {
	background: var(--aif-cta-hover);
	color: var(--aif-cta-ink);
	border-color: var(--aif-cta-hover);
	box-shadow: none;
	transform: translateY(1px);
}
/* `color: inherit !important` — and the !important is the entire point.
   In 0.1.81 the colour was dropped from this rule so the button could stay
   white on a photo and ink on a card. That opened exactly the hole this layer
   exists to close: a rule only protects the properties it DECLARES, so an
   Elementor kit's `button:hover { color: #fff }` walked straight in and turned
   the Back label and its border white on a light background.
   `inherit` keeps the mode-awareness; `!important` keeps the kit out. Both are
   needed — this is not a redundant declaration. */
.aif .aif-ghost:hover,
.aif .aif-ghost:focus,
.aif .aif-ghost:active {
	background: transparent;
	color: inherit;
	border-color: currentColor;
	opacity: 1;
}

/* --- option rows are LABELS, and a kit styles label:hover too.
   These stay state-aware: forcing the unselected look would wipe the selected
   styling that :has(input:checked) provides. ------------------------------- */
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt:hover,
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt:focus,
:is(.abc-asl, .abc-asl-modern) .asl2-ms-opt:active {
	background: color-mix(in srgb, var(--abc-line) 45%, var(--abc-surface)) !important;
	color: var(--abc-ink) !important;
	border-color: transparent !important;
}
/* Scoped to steps WITHOUT a photo. Unscoped, this forced a white card while
   the photo-mode rule kept the label white — hovering an option made it
   disappear completely, which is what read as "broken". Over a photo the
   glass simply deepens instead.
   The values MATCH the component rules above rather than inventing a look of
   their own: this layer exists to stop an Elementor kit repainting the card,
   not to be a second design. `border-color` is deliberately ink, the same as
   the plain hover, so hover and click read identically. */
/* Hover previews the SELECTION, it does not invent a grey state of its own
   (Ferenc 2026-07-21). The card keeps its surface and the edge goes red — the
   same red it will keep once clicked, just without the wash. A grey hover said
   nothing about what was about to happen. */
.aif .aif-step:not([data-aif-photo="1"]) .aif-opt:hover,
.aif .aif-step:not([data-aif-photo="1"]) .aif-opt:focus,
.aif .aif-step:not([data-aif-photo="1"]) .aif-opt:active {
	background: var(--aif-surface);
	color: var(--aif-ink);
	border-color: var(--aif-red);
}
.aif .aif-step:not([data-aif-photo="1"]) .aif-opt:has(input:checked):hover,
.aif .aif-step:not([data-aif-photo="1"]) .aif-opt:has(input:checked):focus,
.aif .aif-step:not([data-aif-photo="1"]) .aif-opt:has(input:checked):active {
	background: rgba(255, 49, 49, .12);
	border-color: var(--aif-red);
}
/* Photo mode, PHONE ONLY. The media query is the whole point and was missing:
   `data-aif-photo` says a photo exists for the step, NOT that this control sits
   on it. On a desktop the option cards live in the form column beside the
   photo, on a light ground — and this rule was washing them with 52% black on
   hover. That is the grey Ferenc kept seeing on steps 1-3.
   The glass hover belongs exactly where the glass is: the phone. */
@media (max-width: 860px) {
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row):hover,
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row):active {
		background: rgba(0, 0, 0, .52);
		border-color: rgba(255, 255, 255, .7);
	}
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row):has(input:checked):hover,
	.aif .aif-step[data-aif-photo="1"]:not([data-aif-dense]) :is(.aif-opt, .aif-row):has(input:checked):active {
		background: rgba(0, 0, 0, .62);
		border-color: var(--aif-red);
	}
}

/* Everywhere else — the desktop form column, and every carded step — hover is
   the red edge and nothing more, exactly as on a step with no photo. One
   behaviour for one gesture, whatever is behind the card. */
@media (min-width: 861px) {
	.aif .aif-opt:hover, .aif .aif-opt:focus, .aif .aif-opt:active,
	.aif .aif-row:hover, .aif .aif-row:focus, .aif .aif-row:active {
		background: var(--aif-surface);
		border-color: var(--aif-red);
	}
	.aif .aif-opt:has(input:checked):hover, .aif .aif-opt:has(input:checked):active,
	.aif .aif-row:has(input:checked):hover, .aif .aif-row:has(input:checked):active {
		background: rgba(255, 49, 49, .12);
		border-color: var(--aif-red);
	}
}

/* The theme never gets to underline anything inside the plugin. */
:is(.abc-asl, .abc-asl-modern, .aif) :is(a, button, label):hover,
:is(.abc-asl, .abc-asl-modern, .aif) :is(a, button, label):focus,
:is(.abc-asl, .abc-asl-modern, .aif) :is(a, button, label):active {
	text-decoration: none;
}

/* Bare links (no class of their own) still picked up the kit's hover fill and
   border. Colour was already covered by the plugin's own a:hover rule - the
   empirical audit showed only these two properties differing. */
:is(.abc-asl, .abc-asl-modern) a:not([class]):hover,
:is(.abc-asl, .abc-asl-modern) a:not([class]):focus,
:is(.abc-asl, .abc-asl-modern) a:not([class]):active {
	background: transparent;
	border-color: transparent;
}

/* Search-profile popup moved out of the detail header (0.1.65, Ferenc).
   The header used to carry an always-open chip strip repeating the whole
   profile; the filter below already shows the same values as chips, so it was
   duplicated on screen. It is now a button next to "Edit customer" that opens
   the SAME shared popup the customer list uses, and that popup can hand off
   straight into the edit dialog. */
:is(.abc-asl, .abc-asl-modern) .asl3-profilebtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-right: 8px;
}
:is(.abc-asl, .abc-asl-modern) .asl2-cd-foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 14px 16px;
	border-top: 1px solid var(--abc-line);
}
:is(.abc-asl, .abc-asl-modern) .asl2-cd-foot[hidden] {
	display: none;
}
/* The popup is a plain top-to-bottom list; give the rows a little more air now
   that it is the only place the full profile is shown. */
:is(.abc-asl, .abc-asl-modern) [data-abc-asl-profile-dialog] .asl2-cd-row {
	padding: 9px 0;
}

/* ==========================================================================
   CUSTOMER SELECTION — CARD GRID (0.1.67, Ferenc)
   The page was a single-column list of rows, which underweights the photo.
   Properties sell on the picture, so it is a card grid now.

   Column count is NOT hardcoded to 3: auto-fill with a 300px minimum gives 3
   on a normal desktop, 2 on a tablet and 1 on a phone, and stays correct if
   the Elementor column is narrower than expected — which we do not control.
   ========================================================================== */
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 18px;
	border: 0;
	background: transparent;
	border-radius: 0;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--abc-asl-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
	transition: box-shadow .16s ease, transform .16s ease;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item:hover {
	box-shadow: 0 6px 22px rgba(0, 0, 0, .09);
	transform: translateY(-2px);
}

/* --- image + centred magnifier ------------------------------------------ */
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item .abc-asl-thumb--large {
	position: relative;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid var(--abc-asl-line);
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: var(--abc-asl-bg, #f4f4f5);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item .abc-asl-thumb--large img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Always visible, NOT hover-only: a customer link is opened on a phone more
   often than not, and there is no hover on a touch screen — a hover-only
   affordance would be invisible to most of the people this page is for. */
/* Must out-rank `:is(...) .abc-asl-thumb span` (0,2,1), which pins EVERY span
   inside the image to the top-left corner for the "New" badge - it was landing
   the magnifier there too. Adding .abc-asl-thumb makes this 0,3,1. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb .abc-asl-card__zoom {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--abc-asl-ink);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
	transition: transform .16s ease;
	pointer-events: none;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb .abc-asl-card__zoom svg {
	width: 20px;
	height: 20px;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item:hover .abc-asl-thumb .abc-asl-card__zoom {
	transform: translate(-50%, -50%) scale(1.08);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-thumb .abc-asl-card__new {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--abc-asl-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
}

/* --- body ---------------------------------------------------------------- */
:is(.abc-asl, .abc-asl-modern) .abc-asl-card__body {
	display: flex;
	flex-direction: column;
	gap: 7px;
	padding: 13px 14px 4px;
	flex: 1;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-card__body h2 {
	margin: 0;
	font-size: 15px;
	line-height: 1.3;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-card__loc {
	display: flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	font-size: 12.5px;
	color: var(--abc-asl-muted);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-card__loc svg {
	width: 14px;
	height: 14px;
	flex: none;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-card__facts li {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	color: var(--abc-asl-ink);
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-card__facts svg {
	width: 15px;
	height: 15px;
	color: var(--abc-asl-muted);
	flex: none;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-card__price {
	margin-top: auto;
	padding-top: 8px;
	font-size: 16px;
	font-weight: 700;
}

/* --- rating row ---------------------------------------------------------- */
/* Deliberately NOT shrunk with the rest of the card. This is the one action
   the whole page exists for, and it is mostly used on a phone: below ~40px the
   buttons get mis-tapped. Compact card, comfortable target. */
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item .abc-asl-choice-group {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6px;
	padding: 10px 14px 14px;
	border-top: 1px solid var(--abc-asl-line);
	margin-top: 10px;
}
:is(.abc-asl, .abc-asl-modern) .abc-asl-customer-item .abc-asl-choice-group button {
	min-height: 40px;
	font-size: 13px;
}

@media (max-width: 480px) {
	:is(.abc-asl, .abc-asl-modern) .abc-asl-customer__items {
		grid-template-columns: 1fr;
	}
}

/* --- header action ------------------------------------------------------- */


/* ==========================================================================
   0.1.90 — THE COVER (Ferenc picked design A)
   ==========================================================================
   The customer page now opens on a photograph with the greeting on top of it,
   instead of on a greeting, a button and a strip of counters.

   Three things about this block, all learned the hard way:

   1. EVERY piece of text over the photo states its own colour, with
      !important. Two rules further up this file would otherwise repaint it
      mid-picture: `.abc-asl p, .abc-asl span, .abc-asl label span` paints
      every span CRM grey, and the Elementor kit reaches buttons. Inheritance
      is not reliable here — this exact trap has bitten three times.

   2. Icons stroke with `currentColor`, so an icon is text for this purpose.

   3. New class names (`__cover`, `__progress`) rather than reusing `__hero`
      and `__summary`. Those two carry `background: … !important` from the
      0.1.67 generation; restyling them would mean stacking another override
      on an override, which is what made this file hard to change in the first
      place.
   ========================================================================== */
.abc-asl.abc-asl-customer .abc-asl-customer__cover {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: clamp(320px, 52vh, 460px);
	margin-bottom: 18px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 14px;
	/* The ground under the photo, and the whole background when there is no
	   photo: the logo ink into the logo sea. Never a flat grey box. */
	background: linear-gradient(135deg, #0F2E38 0%, #164C59 58%, #1C6E7E 100%);
	box-shadow: 0 1px 2px rgba(15, 46, 56, .08), 0 18px 44px -22px rgba(15, 46, 56, .5);
	isolation: isolate;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

/* Dark at the top so the logo and the profile button stay readable, dark at
   the bottom for the greeting, and deliberately clear through the middle —
   that band is the part of the photograph people actually look at. */
.abc-asl.abc-asl-customer .abc-asl-customer__cover-scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(180deg, rgba(11, 33, 41, .58) 0%, rgba(11, 33, 41, .12) 30%, rgba(11, 33, 41, .10) 42%, rgba(11, 33, 41, .74) 78%, rgba(11, 33, 41, .90) 100%);
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover--nophoto .abc-asl-customer__cover-scrim {
	background: linear-gradient(180deg, rgba(11, 33, 41, .25) 0%, rgba(11, 33, 41, .55) 100%);
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 18px 22px;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-logo {
	display: block;
	width: auto;
	max-width: 190px;
	max-height: 34px;
	margin: 0;
	object-fit: contain;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-word {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	color: #fff;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-profile {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 38px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .55);
	border-radius: 8px;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	box-shadow: none;
	cursor: pointer;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: background .16s ease, border-color .16s ease;
}

/* Both halves load-bearing: without the colour, the Elementor kit paints the
   label on hover; without the span rule, the grey-span selector paints it. */
.abc-asl.abc-asl-customer .abc-asl-customer__cover-profile span,
.abc-asl.abc-asl-customer .abc-asl-customer__cover-profile svg {
	color: inherit;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-profile svg {
	width: 15px;
	height: 15px;
	flex: none;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-profile:hover,
.abc-asl.abc-asl-customer .abc-asl-customer__cover-profile:focus-visible {
	border-color: rgba(255, 255, 255, .9);
	background: rgba(255, 255, 255, .26);
	color: #fff;
	outline: none;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-inner {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 22px 26px 26px;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-kicker {
	margin: 0 0 12px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .84);
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-title {
	margin: 0;
	font-size: clamp(30px, 5vw, 50px);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -.02em;
	color: #fff;
	text-wrap: balance;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-lede {
	margin: 12px 0 0;
	max-width: 46ch;
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .90);
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 30px;
	margin: 22px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid rgba(255, 255, 255, .28);
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-meta > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-meta dt {
	margin: 0;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
}

.abc-asl.abc-asl-customer .abc-asl-customer__cover-meta dd {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.abc-asl.abc-asl-customer .abc-asl-customer__cover {
		min-height: clamp(300px, 62vh, 420px);
		border-radius: 12px;
	}
	.abc-asl.abc-asl-customer .abc-asl-customer__cover-bar {
		padding: 14px 16px;
	}
	.abc-asl.abc-asl-customer .abc-asl-customer__cover-inner {
		padding: 18px 18px 20px;
	}
	/* The label goes, the pencil stays — a full-width button on the photo eats
	   the picture, and the icon alone is the same target size. */
	.abc-asl.abc-asl-customer .abc-asl-customer__cover-profile span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
	.abc-asl.abc-asl-customer .abc-asl-customer__cover-profile {
		padding: 8px 10px;
	}
	.abc-asl.abc-asl-customer .abc-asl-customer__cover-meta {
		gap: 10px 22px;
	}
}

/* --- progress ------------------------------------------------------------
   Replaces the "Properties · New · Updated" counters. Same row, but it tells
   the customer what is left to do instead of reporting what the system knows.
   -------------------------------------------------------------------------- */
.abc-asl.abc-asl-customer .abc-asl-customer__progress {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
	padding: 13px 18px;
	border: 1px solid var(--abc-asl-line);
	border-radius: 12px;
	background: #fff;
}

.abc-asl.abc-asl-customer .abc-asl-customer__progress-text {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin: 0;
	flex: none;
	font-size: 13px;
	color: var(--abc-asl-muted);
}

.abc-asl.abc-asl-customer .abc-asl-customer__progress-text strong {
	font-size: 16px;
	font-weight: 700;
	color: var(--abc-asl-ink);
	font-variant-numeric: tabular-nums;
}

.abc-asl.abc-asl-customer .abc-asl-customer__progress-text span {
	color: var(--abc-asl-muted);
}

.abc-asl.abc-asl-customer .abc-asl-customer__progress-track {
	position: relative;
	flex: 1;
	height: 6px;
	overflow: hidden;
	border-radius: 99px;
	background: var(--abc-asl-line);
}

.abc-asl.abc-asl-customer .abc-asl-customer__progress-bar {
	display: block;
	height: 100%;
	min-width: 0;
	border-radius: 99px;
	background: #FF3131;
	transition: width .3s ease;
}

@media (prefers-reduced-motion: reduce) {
	.abc-asl.abc-asl-customer .abc-asl-customer__progress-bar {
		transition: none;
	}
}

@media (max-width: 480px) {
	.abc-asl.abc-asl-customer .abc-asl-customer__progress {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
}

/* --- cards, one size up --------------------------------------------------
   4:3 rather than 3:2, and a wider minimum column, so the photograph carries
   the card the way it carries the cover. !important because the 0.1.67 block
   sets the aspect ratio with !important.
   -------------------------------------------------------------------------- */
/* min(320px, 100%) rather than a bare 320px: when the column is narrower than
   the minimum, auto-fill still lays out ONE track at the minimum and the card
   hangs over the edge. Caught at 375px, where the container is 303px and the
   card was 320px — a 17px overhang and a sideways scroll on exactly the device
   most of these links are opened on.

   Not fixed with another `@media (max-width: 480px)` on purpose: this rule is
   more specific than the 480px one further up, so that one no longer applies
   here, and re-adding it would mean two places to keep in step. min() needs no
   breakpoint at all. */
.abc-asl.abc-asl-customer .abc-asl-customer__items {
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 22px;
}

.abc-asl.abc-asl-customer .abc-asl-thumb--large {
	aspect-ratio: 4 / 3;
}

.abc-asl.abc-asl-customer .abc-asl-card__body {
	gap: 8px;
	padding: 16px 16px 6px;
}

.abc-asl.abc-asl-customer .abc-asl-card__body h2 {
	font-size: 17px;
	line-height: 1.25;
}

.abc-asl.abc-asl-customer .abc-asl-card__price {
	padding-top: 10px;
	font-size: 19px;
	letter-spacing: -.01em;
}

/* --- the chosen answer ---------------------------------------------------
   Brand red, exactly the treatment the inquiry form already uses for a
   selected option (see --aif-red): red border, a 7% red wash, and the label
   left dark. The red is NOT used as a fill behind white text — #FF3131 on
   white is 3.4:1, which is fine for a border or an icon and short of the
   4.5:1 a label needs. That is why this reads as a wash and not a block.

   Same treatment for all three answers on purpose: only one can be active,
   the word inside the button carries the meaning, and one selected state
   makes both customer-facing surfaces feel like one house.
   -------------------------------------------------------------------------- */
.abc-asl.abc-asl-customer .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="good"],
.abc-asl.abc-asl-customer .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="maybe"],
.abc-asl.abc-asl-customer .abc-asl-choice-group button[aria-pressed="true"][data-abc-asl-choice="no"] {
	border-color: #FF3131;
	background: rgba(255, 49, 49, .07);
	color: var(--abc-asl-ink);
	font-weight: 600;
}

/* ==== Single-property inquiry form (public, [abc_single_property_inquiry]) ====
   Self-contained: explicit brand palette rather than the --abc-* tokens, which
   are scoped to the .abc-asl workspace roots and are not present here. Scoped to
   .abc-spi so nothing bleeds into the theme. */
.abc-spi { box-sizing: border-box; max-width: 460px; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #0F2E38; }
.abc-spi * { box-sizing: border-box; }
.abc-spi-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.abc-spi-form { background: #fff; border: 1px solid rgba(15, 46, 56, .12); border-radius: 14px; padding: 22px 22px 20px; box-shadow: 0 2px 14px rgba(15, 46, 56, .06); }
.abc-spi-title { margin: 0 0 4px; font-size: 20px; line-height: 1.25; font-weight: 700; color: #0F2E38; }
.abc-spi-sub { margin: 0 0 16px; font-size: 14px; line-height: 1.5; color: #5b6b70; }
.abc-spi-field { display: block; margin: 0 0 12px; }
.abc-spi-field > span { display: block; margin: 0 0 5px; font-size: 12.5px; font-weight: 600; letter-spacing: .2px; color: #0F2E38; }
.abc-spi-field input, .abc-spi-field textarea { width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit; color: #0F2E38; background: #fff; border: 1px solid rgba(15, 46, 56, .18); border-radius: 10px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.abc-spi-field textarea { resize: vertical; min-height: 92px; }
.abc-spi-field input:focus, .abc-spi-field textarea:focus { border-color: #1C6E7E; box-shadow: 0 0 0 3px rgba(28, 110, 126, .15); }
.abc-spi-field input::placeholder, .abc-spi-field textarea::placeholder { color: #9aa7ab; }
.abc-spi-input { position: relative; display: block; }
.abc-spi-input svg.abc-cf-ic { position: absolute; left: 13px; top: 12px; width: 17px; height: 17px; color: #1C6E7E; pointer-events: none; }
.abc-spi-input--area svg.abc-cf-ic { top: 13px; }
.abc-spi-input input, .abc-spi-input textarea { padding-left: 40px; }
/* Elementor globals with the previous red as the fallback, so the button follows
   the site's brand where those colours exist and looks unchanged where they do
   not. Hover mixes 8 % white — minimally lighter, and it keeps working whatever
   the global is set to. (Ferenc 2026-07-26.) */
.abc-spi-btn { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin: 4px 0 0; padding: 13px 18px; font-size: 15px; font-weight: 700; font-family: inherit; color: var(--e-global-color-7b473b5, #fff); background-color: var(--e-global-color-34d064f, #FF3131); border: 1px solid var(--e-global-color-34d064f, #FF3131); border-radius: 10px; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, transform .05s ease; }
.abc-spi-btn:hover { background-color: color-mix(in srgb, var(--e-global-color-34d064f, #FF3131) 92%, #fff); border-color: color-mix(in srgb, var(--e-global-color-34d064f, #FF3131) 92%, #fff); }
.abc-spi-btn:active { transform: translateY(1px); }
.abc-spi-btn svg { width: 18px; height: 18px; flex: none; display: block; }

/* WhatsApp: underneath, black outline and black text, no fill — secondary on
   purpose, because sending normally stays the primary action. */
.abc-spi-btn--wa { margin-top: 10px; background-color: transparent; border-color: #000; color: #000; }
.abc-spi-btn--wa:hover { background-color: rgba(0, 0, 0, .06); border-color: #000; }

.abc-spi-opt { font-style: normal; font-weight: 500; font-size: 11.5px; color: #9aa7ab; }
.abc-spi-note { margin: 10px 0 0; font-size: 12px; line-height: 1.5; color: #8a979b; text-align: center; }
.abc-spi-error { margin: 0 0 14px; padding: 10px 13px; font-size: 13.5px; color: #8a1f1f; background: rgba(196, 30, 30, .08); border: 1px solid rgba(196, 30, 30, .25); border-radius: 10px; }
.abc-spi-done { background: #fff; border: 1px solid rgba(15, 46, 56, .12); border-radius: 14px; padding: 26px 22px; text-align: center; box-shadow: 0 2px 14px rgba(15, 46, 56, .06); }
.abc-spi-check { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin: 0 0 10px; border-radius: 50%; background: rgba(28, 110, 126, .12); color: #1C6E7E; }
.abc-spi-check svg { width: 24px; height: 24px; }
.abc-spi-done strong { display: block; font-size: 18px; color: #0F2E38; margin: 0 0 6px; }
.abc-spi-done p { margin: 0; font-size: 14px; line-height: 1.55; color: #5b6b70; }


/* --- Outside the customer profile (0.1.95) --------------------------------
   The properties the scoring used to delete for being over budget. Collapsed
   and visibly quieter than the ranked table: they are an answer to "is there
   anything else", not a suggestion list. Uses <details>, so the open/closed
   state needs no JavaScript and survives the AJAX replace of the block. */
.abc-asl-modern .asl2-beyond {
	margin-top: 14px;
	border: 1px solid var(--abc-line);
	border-radius: 10px;
	background: transparent;
}

.abc-asl-modern .asl2-beyond .asl2-beyond-head {
	cursor: pointer;
	padding: 10px 14px;
	font-size: 13px;
	color: var(--abc-muted);
	list-style: none;
}

.abc-asl-modern .asl2-beyond .asl2-beyond-head::-webkit-details-marker { display: none; }

.abc-asl-modern .asl2-beyond .asl2-beyond-head::before {
	content: "▸";
	display: inline-block;
	margin-right: 8px;
	transition: transform 0.15s ease;
}

.abc-asl-modern .asl2-beyond[open] .asl2-beyond-head::before { transform: rotate(90deg); }

.abc-asl-modern .asl2-beyond .asl2-beyond-head:hover,
.abc-asl-modern .asl2-beyond .asl2-beyond-head:focus-visible { color: var(--abc-ink); }

.abc-asl-modern .asl2-beyond .asl2-beyond-note {
	margin: 0;
	padding: 0 14px 10px;
	font-size: 12px;
	color: var(--abc-muted);
}

@media (prefers-reduced-motion: reduce) {
	.abc-asl-modern .asl2-beyond .asl2-beyond-head::before { transition: none; }
}

/* The block's table has no <thead> - it would repeat a header the agent has
   already read two rows above. With table-layout: fixed the widths hang off
   `th`, so without this the columns sit visibly out of step with the table
   above. Mirrors the header widths onto the body cells. */
.abc-asl-modern .asl2-beyond .asl2-table td:nth-child(1) { width: 320px; }
.abc-asl-modern .asl2-beyond .asl2-table td:nth-child(2),
.abc-asl-modern .asl2-beyond .asl2-table td:nth-child(3),
.abc-asl-modern .asl2-beyond .asl2-table td:nth-child(4) { width: 116px; }
.abc-asl-modern .asl2-beyond .asl2-table td:nth-child(5) { width: 72px; }
.abc-asl-modern .asl2-beyond .asl2-table td:nth-child(6) { width: 114px; }
.abc-asl-modern .asl2-beyond .asl2-table td:nth-child(7) { width: 96px; }
.abc-asl-modern .asl2-beyond .asl2-table td:nth-child(8) { width: 74px; }
.abc-asl-modern .asl2-beyond .asl2-table td:nth-child(9) { width: 96px; }

/* Die Regel fuer .is-off-profile stand hier und ist 2026-07-27 in den Block der
   Bestandstabelle gewandert (bei .asl2-table, ~Zeile 4081) — sie gehoert dorthin,
   wo die Tabelle gestaltet wird, nicht ans Dateiende. */

/* ==== SIDEBAR (0.1.134, Ferenc 2026-07-28) =============================
   Die schmale schwarze Navigationsleiste links, die das Agenten-Backend
   rahmt. Ein zusammenhaengender Block am Dateiende, mit Markern, damit der
   Vorschau-Pruefstand (sidebarpreview.php) genau diesen Teil herausschneiden
   und mit dem echten Template rendern kann — was hier steht, ist was auf
   stage laeuft. Alles 13px, Schrift grau -> weiss beim Hover, Panel schwarz.
   Nur aktiv, wenn .abc-asl-has-side gesetzt ist (dashboard.php): so bleibt
   der Umbau ein Schalter, nicht ein Eingriff in die Basis-Regel. */
/* @sidebar:start */
.abc-asl-modern.abc-asl-has-side { display: flex; align-items: flex-start; gap: 0; }
/* 20px breathing room so the content is not glued to the rail or the page edge
   (Ferenc, stage 2026-07-28: "braucht links und rechts Abstand 20px"). */
.abc-asl-modern .abc-asl-main { flex: 1 1 auto; min-width: 0; padding: 0 20px; }

/* The rail RESERVES 56px in the layout and never changes it. The widening is
   the inner .asl-side-rail floating OVER the content (Ferenc: "überlagern"), so
   the wide match tables never reflow. */
.abc-asl-modern .asl-side { flex: 0 0 56px; align-self: stretch; position: relative; width: 56px; }

.abc-asl-modern .asl-side-rail {
	position: sticky;
	top: 0;
	width: 56px;
	height: 100vh;
	background: #09090b;
	display: flex;
	flex-direction: column;
	padding: 10px 8px;
	font-size: 13px;
	z-index: 20;
	transition: width .16s ease;
}
/* The WordPress admin bar is fixed over the top 32px (46px on small screens) for
   a logged-in agent. Without this the sticky rail sticks UNDER it and the avatar
   hides behind the toolbar (Ferenc, stage 2026-07-28). Offset the stick point and
   trim the height to match; the flyout uses height:100% so it follows. */
.admin-bar .abc-asl-modern .asl-side-rail { top: 32px; height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
	.admin-bar .abc-asl-modern .asl-side-rail { top: 46px; height: calc(100vh - 46px); }
}
/* Widens ONLY when the pointer is over the rail itself — not the page
   (Ferenc: "nur wenn ich auf die Seitenleiste hover, nicht alles"). The flyout
   is a CHILD, so moving into the open customer panel keeps the rail open. */
.abc-asl-modern .asl-side-rail:hover { width: 176px; }

/* Every text/icon colour carries !important: the isolation block above
   (.abc-asl-modern a:not(.btn) { color: inherit !important } and the h/p rule)
   otherwise forces the rail's links and the empty <p> to the theme colour —
   exactly the "font Farben gehen nicht" Ferenc saw on stage 2026-07-28. The rail
   is black, so the colours are fixed here and must win. */
.abc-asl-modern .asl-side-brand { display: flex; align-items: center; gap: 8px; padding: 4px 6px 14px; text-decoration: none; }
.abc-asl-modern .asl-side-mark { width: 26px; height: 26px; border-radius: 7px; background: var(--abc-accent); color: #fff !important; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex: none; }
.abc-asl-modern .asl-side-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.abc-asl-modern .asl-side-kicker { font-size: 12px; color: #5a5a60 !important; }
.abc-asl-modern .asl-side-hello { font-size: 15px; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.abc-asl-modern .asl-side-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
	margin: 0;
	padding: 8px 9px;
	font-family: inherit;
	font-weight: 400;
	font-size: 13px !important;
	color: #8a8a92 !important;
	text-align: left;
	text-decoration: none;
	background: transparent;
	border: 0;
	border-radius: 7px;
	cursor: pointer;
	white-space: nowrap;
	transition: background .12s, color .12s;
}
.abc-asl-modern .asl-side-link:hover { color: #fff !important; background: #1f1f22; }
.abc-asl-modern .asl-side-link.is-on { color: #fff !important; background: #202638; }
.abc-asl-modern .asl-side-ic { display: inline-flex; width: 19px; flex: none; }
.abc-asl-modern .asl-side-ic svg { width: 19px; height: 19px; }
.abc-asl-modern .asl-side-chev { display: inline-flex; transform: rotate(-90deg); transition: transform .14s; }
.abc-asl-modern .asl-side-chev svg { width: 14px; height: 14px; }
.abc-asl-modern .asl-side-toggle[aria-expanded="true"] .asl-side-chev { transform: rotate(0); }
.abc-asl-modern .asl-side-tag { font-size: 11px; color: #5a5a60 !important; }
.abc-asl-modern .asl-side-spacer { flex: 1 1 auto; }
.abc-asl-modern .asl-side-foot { border-top: 1px solid #242427; padding-top: 8px; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }

/* The "+ New customer" primary action — the plus stays accent-blue in both
   states so it reads as the one thing to click; it opens the SAME dialog the
   customer list uses (data-abc-asl-open-dialog="create-customer"). */
.abc-asl-modern .asl-side-new .asl-side-ic { color: var(--abc-accent) !important; }
.abc-asl-modern .asl-side-rail:hover .asl-side-new:hover { background: var(--abc-accent); color: #fff !important; }
.abc-asl-modern .asl-side-rail:hover .asl-side-new:hover .asl-side-ic { color: #fff !important; }

/* COLLAPSED = icons only. The labels are hidden and the rows centre their icon;
   on hover the rail widens and the labels appear, left-aligned. */
.abc-asl-modern .asl-side-label { display: none; }
.abc-asl-modern .asl-side-rail:hover .asl-side-link { justify-content: flex-start; gap: 11px; }
.abc-asl-modern .asl-side-rail:hover .asl-side-brand { gap: 10px; }
.abc-asl-modern .asl-side-rail:hover .asl-side-id,
.abc-asl-modern .asl-side-rail:hover .asl-side-label { display: flex; }
.abc-asl-modern .asl-side-rail:hover .asl-side-toggle .asl-side-chev { margin-left: auto; }
.abc-asl-modern .asl-side-rail:hover .asl-side-tag { margin-left: auto; }

/* The customer panel, black, one step lighter so its edge shows. It sits at the
   rail's RIGHT edge (left:100%) so it follows the width automatically — 56 when
   collapsed, 176 when the rail is open. z-index below the rail so the rail stays
   on top; overlays the page content, never pushes it. */
.abc-asl-modern .asl-side-flyout {
	position: absolute;
	left: 100%;
	top: 0;
	width: 220px;
	height: 100%;
	background: #161618;
	border-right: 1px solid #242427;
	padding: 12px 8px;
	display: flex;
	flex-direction: column;
	z-index: 19;
	visibility: hidden;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity .16s, transform .16s, visibility .16s;
}
.abc-asl-modern .asl-side-flyout.is-open { visibility: visible; opacity: 1; transform: translateX(0); }
.abc-asl-modern .asl-side-search { padding: 2px 4px 10px; }
.abc-asl-modern .asl-side-search input {
	width: 100%;
	background: #0d0d0f;
	border: 1px solid #242427;
	color: #fff;
	font: 400 13px inherit;
	padding: 6px 9px;
	border-radius: 6px;
	outline: none;
}
.abc-asl-modern .asl-side-search input::placeholder { color: #5a5a60; }
.abc-asl-modern .asl-side-search input:focus { border-color: #3a3a40; }
.abc-asl-modern .asl-side-clist { flex: 1 1 auto; overflow: auto; }
.abc-asl-modern .asl-side-crow { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 6px; text-decoration: none; }
/* 0.1.136: the search sets `hidden` on a row, and `display:flex` above BEATS the
   browser's `[hidden] { display: none }` — so filtering did nothing and Ferenc
   reported "Search funktioniert nicht" (stage 2026-07-28). A rule that hides
   something must out-specify the rule that shows it. */
.abc-asl-modern .asl-side-crow[hidden] { display: none; }
.abc-asl-modern .asl-side-crow:hover { background: #1f1f22; }
.abc-asl-modern .asl-side-crow:hover .asl-side-cname { color: #fff; }
.abc-asl-modern .asl-side-cname { font-size: 13px; color: #c4c4c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abc-asl-modern .asl-side-cstatus { margin-left: auto; font-size: 11px; color: #8a8a92; white-space: nowrap; }
.abc-asl-modern .asl-side-empty { padding: 10px; margin: 0; font-size: 12px; color: #5a5a60; }

/* Status colour on the WORD (Ferenc 2026-07-28: dots removed). One class on the
   row so name and status share it; same hues as the table badges. */
.abc-asl-modern .asl-side-st--new .asl-side-cstatus { color: #7fa2ec; }
.abc-asl-modern .asl-side-st--searching .asl-side-cstatus { color: #46c690; }
.abc-asl-modern .asl-side-st--replied .asl-side-cstatus { color: #e0a53f; }
/* @sidebar:end */

/* ==== KOPF DER KUNDEN-DETAILSEITE (0.1.140, Ferenc 2026-07-29) ==========
   Ersetzt .asl3-head/.asl3-idcard. Dunkel wie die Navigationsleiste, damit die
   beiden zusammen einen Rahmen bilden, und FEST OBEN: die Objektliste ist lang,
   und ohne das scrollt die Einordnung des Kunden weg, waehrend unten ausgewaehlt
   wird. Farben mit !important aus demselben Grund wie in der Leiste — die
   Isolations-Regel (.abc-asl-modern a:not(.btn), h/p) faerbt sonst auf Theme-
   Schwarz um, und der Kopf ist schwarz. */
/* @detailhead:start */
.abc-asl-modern .asl4-head {
	/* NICHT klebend (Ferenc 2026-07-29). Sticky hiess: der Kopf legt sich beim
	   Scrollen ueber die Liste und die Auswahl musste um seine Hoehe versetzt
	   einrasten — zwei Werte, die man getrennt kaputtmachen kann. */
	position: static;
	background: #09090b;
	color: #fff !important;
	/* rundum, nicht nur unten: als eigenstaendiger Block statt als angeklebte
	   Leiste am oberen Rand. */
	border-radius: 12px;
	padding: 12px 16px;
	margin: 0 0 14px;
}

.abc-asl-modern .asl4-head-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.abc-asl-modern .asl4-avatar { background: var(--abc-accent) !important; color: #fff !important; flex: none; }
.abc-asl-modern .asl4-id { min-width: 0; }
.abc-asl-modern .asl4-name { font-size: 15px; line-height: 1.2; color: #fff !important; }
.abc-asl-modern .asl4-contact { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; }
.abc-asl-modern .asl4-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #8a8a92 !important; }
.abc-asl-modern .asl4-meta svg { width: 13px; height: 13px; }
.abc-asl-modern .asl4-spacer { flex: 1 1 auto; }

/* Der Bearbeiten-Knopf sitzt auf Schwarz, also eigene Farben statt der hellen
   .btn-Flaeche. Der Suchprofil-Knopf kommt aus abc_asl_profile_view_button()
   und traegt .btn — beide werden hier gleich behandelt. */
.abc-asl-modern .asl4-head .btn {
	background: transparent;
	border: 1px solid #242427;
	color: #a1a1aa !important;
}
/* Nur Rahmen und Schrift, KEINE Füllung — Ferencs Hover-Regel, die hovertest
   festhält. Ein gefüllter Hover ist hier zusätzlich heikel: der Kopf ist
   schwarz, jede Füllung wäre ein zweites Schwarz auf Schwarz. */
.abc-asl-modern .asl4-head .btn:hover,
.abc-asl-modern .asl4-head .btn:focus-visible {
	border-color: #6b7280;
	color: #fff !important;
}

.abc-asl-modern .asl4-kpis {
	display: flex;
	align-items: flex-end;
	gap: 26px;
	flex-wrap: wrap;
	border-top: 1px solid #242427;
	margin-top: 11px;
	padding-top: 10px;
}
.abc-asl-modern .asl4-kpi { display: flex; flex-direction: column; gap: 1px; }
.abc-asl-modern .asl4-kpi b { font-size: 17px; font-weight: 500; line-height: 1.05; color: #fff !important; }
.abc-asl-modern .asl4-kpi span { font-size: 11px; color: #8a8a92 !important; }
.abc-asl-modern .asl4-profile { margin-left: auto; text-align: right; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.abc-asl-modern .asl4-profile b { font-size: 13px; font-weight: 500; color: #fff !important; }
.abc-asl-modern .asl4-profile span { font-size: 11px; color: #8a8a92 !important; }

.abc-asl-modern .asl4-deal {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	border-top: 1px solid #242427;
	margin-top: 10px;
	padding-top: 9px;
}
.abc-asl-modern .asl4-deal-kicker { font-size: 11px; color: #8a8a92 !important; text-transform: uppercase; letter-spacing: .04em; }
.abc-asl-modern .asl4-deal strong { font-size: 14px; color: #fff !important; }
.abc-asl-modern .asl4-deal-value { font-size: 13px; color: #46c690 !important; margin-left: auto; }

/* Auf schmalen Fenstern rutscht das Profil unter die Kennzahlen statt sie zu
   quetschen. */
@media (max-width: 900px) {
	.abc-asl-modern .asl4-profile { margin-left: 0; text-align: left; width: 100%; }
}
/* @detailhead:end */

/* ==== TABS + SPALTEN DER DETAILSEITE (0.1.141, Ferenc 2026-07-29) ========
   Ein Container: Tabs oben, links Match/Filter, rechts die Auswahl — und die
   steht in BEIDEN Tabs. */
/* @detailtabs:start */
/* Ferenc 2026-07-29, auf stage gesehen: der weisse Rahmen um ALLES ist weg
   (.client-detail-preview im Markup ersetzt). Jetzt drei eigenstaendige
   Bloecke — Kopf, linke Spalte, rechte Spalte — und die Tab-Leiste ist der
   Kopf der LINKEN Spalte, nicht die Klammer um beide. */
.abc-asl-modern .asl4-detail { margin-top: 14px; }

.abc-asl-modern .asl4-detail .selection-workspace {
	display: grid;
	/* rechts FEST 400px (Ferenc). Vorher 0.8fr — die Auswahl wuchs auf grossen
	   Schirmen mit, obwohl ihre Karten eine natuerliche Breite haben. */
	grid-template-columns: minmax(0, 1fr) 500px;
	gap: 16px;
	margin: 0;
	/* ⚠ `start`, NICHT `stretch`: die Auswahl ist position:sticky, und was schon
	   die volle Zeilenhoehe hat, kann nicht mitwandern — das Kleben hoerte dann
	   lautlos auf. */
	align-items: start;
}

/* Die Tab-Leiste sitzt IN der linken Spalte, buendig unter deren Oberkante. */
/* Variante B (Ferenc 2026-07-29): Kopfzeilen zart grau, der AKTIVE Tab weiss.
   Warum nicht alles weiss: beim Unterstrich-Tab traegt sonst allein die 2px-Linie
   die Aussage „hier bist du". Auf grauem Grund gehoert der weisse Tab sichtbar
   zur weissen Liste darunter, und der Strich bestaetigt es nur noch.
   #fafafa, nicht #f4f4f5 — derselbe Ton, den die Oberflaeche schon als
   Seitenhintergrund benutzt, also eine Ebene und keine neue Farbe. */
.abc-asl-modern .asl4-tabs {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	padding: 7px 12px 0;
	/* Ein Ton dunkler als die Meta-Zeile darunter: der aktive Reiter soll SICHTBAR
	   darauf liegen. Bei gleichem Grau verschwindet das Angehobene. */
	background: #f1f1f3;
	border-bottom: 1px solid var(--abc-line);
	border-radius: 10px 10px 0 0;
}
.abc-asl-modern .asl4-tab {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 9px 15px;
	/* ⚠ font-size MIT !important: die Isolationsregel setzt auf JEDEM <button>
	   `font: inherit !important` — eine Kurzform, die jede spaetere font-size
	   ohne !important still verschluckt. Genau daran waren die Filter-Chips
	   11px gross geschrieben und 13px gross dargestellt (Ferenc 2026-07-29). */
	font-family: inherit;
	font-weight: 400;
	font-size: 14px !important;
	color: var(--abc-muted);
	background: transparent;
	border: 0;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
}
.abc-asl-modern .asl4-tab:hover { color: var(--abc-ink); }
/* Variante 2 (Ferenc 2026-07-29): der aktive Reiter ist WEISS und sitzt mit
   einem feinen Schatten auf der Liste. Die FORM sagt „hier bist du", nicht nur
   eine Farbe — das traegt auch, wenn jemand Farben schlecht unterscheidet.
   Das 1px nach unten laesst ihn die Trennlinie ueberdecken, damit Reiter und
   Liste zusammenhaengen statt getrennt zu wirken. */
.abc-asl-modern .asl4-tab.is-on {
	position: relative;
	top: 1px;
	color: var(--abc-ink);
	font-weight: 600;
	background: var(--abc-surface);
	/* ⚠ Der Schatten darf UNTEN nicht ueber die Trennlinie der Leiste laufen
	   (Ferenc). Deshalb negativer Spread: der Schattenkoerper wird um 3px
	   geschrumpft und um 3px nach oben versetzt, seine Unterkante liegt also bei
	   Elementunterkante −6; die Weichzeichnung von 6 traegt davon die Haelfte
	   zurueck, endet damit rund 3px UEBER der Kante. Ein einfaches
	   `0 -2px 6px` haette unten sichtbar durchgeschlagen. */
	box-shadow: 0 -3px 6px -3px rgba(0, 0, 0, .16);
}
.abc-asl-modern .asl4-tabcount {
	font-size: 10px;
	font-weight: 400;
	padding: 1px 7px;
	border-radius: 10px;
	background: var(--abc-accent-soft);
	color: var(--abc-accent-ink);
}
.abc-asl-modern .asl4-tabs-sp { flex: 1 1 auto; }
.abc-asl-modern .asl4-tabnote { font-size: 11px; color: var(--abc-muted); padding: 0 2px 11px 0; }

/* Das Filterformular liegt in der linken Spalte, zwischen Tabs und Liste. */
.abc-asl-modern .asl4-detail .asl2-filter {
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--abc-line);
	border-radius: 0;
	box-shadow: none;
}
.abc-asl-modern .asl2-filter[hidden] { display: none; }

/* EIN Umbruchpunkt (die beiden alten bei 1080 und 980 setzten dasselbe, der
   zweite kam nie zum Zug). 400 rechts + ~500 fuer die Liste + Leiste + Rand. */
@media (max-width: 1180px) {
	.abc-asl-modern .asl4-detail .selection-workspace { grid-template-columns: 1fr; }
}
/* @detailtabs:end */


/* ==== SCHRIFTGROESSE IN LISTE UND AUSWAHL (0.1.145, Ferenc 2026-07-29) ====
   „Alle Property-Listings links und in der Customer Selection muessen 11px
   haben — jetzt ist es ueberall anders."
   Vorher standen fuenf Groessen verstreut in fuenf Regeln: Tabellenkopf 12,
   Zellen 12.5, Knoepfe in der Tabelle 10, Titel der Auswahl-Karte 13, Preis
   und Referenz 12. Die sind ENTFERNT, nicht ueberschrieben — sonst haette man
   beim naechsten Mal wieder zwei Stellen zu suchen.
   ⚠ Symbole bleiben, wie sie sind: .drag-dots (18px) und .icon-btn (20px) sind
   Zeichen, keine Schrift — auf 11px waeren der Ziehgriff und die drei Knoepfe
   der Auswahl-Karte kaum noch zu treffen. */
/* @listing11:start */
.abc-asl-modern .asl2-table thead th,
.abc-asl-modern .asl2-table tbody td,
.abc-asl-modern .asl2-table .badge,
.abc-asl-modern .match-property,
.abc-asl-modern .match-property .small,
.abc-asl-modern .asl2-insel,
.abc-asl-modern .selection-tray-item__info,
.abc-asl-modern .selection-tray-item__info strong,
.abc-asl-modern .selection-tray-item__info > span,
.abc-asl-modern .selection-tray-item .badge,
.abc-asl-modern .asl2-badges,
.abc-asl-modern .asl2-badges .badge {
	font-size: 11px;
}
/* Die BUTTONS aus der Liste brauchen !important — siehe oben: die
   Isolationsregel blockt jede font-size ohne. */
.abc-asl-modern .asl2-table .btn-sm,
.abc-asl-modern .asl2-table .icon-btn { font-size: 11px !important; }
/* @listing11:end */


/* ==== FOTOS IN LISTE UND AUSWAHL (0.1.148, Ferenc 2026-07-29) ============
   „Alle Fotos im Matching-List und in der Selection-List muessen die gleiche
   Breite und Hoehe haben, 42px."
   Vorher drei Groessen fuer dieselbe Sache: 64px breit in der Trefferliste
   (Hoehe kam aus der allgemeinen .photo-Regel, also 42 — ein Rechteck), 76x62
   in der Auswahl, und 58x42 als Grundwert. Die beiden Sonderregeln sind
   ENTFERNT; wer die Groesse sucht, findet sie ab jetzt hier und nur hier.
   Das <img> darin steht schon auf 100%/100% mit object-fit: cover, also
   beschneidet ein Quadrat sauber statt zu verzerren. */
/* @photo42:start */
.abc-asl-modern .match-property .photo,
.abc-asl-modern .selection-tray-item .photo {
	width: 42px;
	min-width: 42px;
	height: 42px;
	min-height: 42px;
	flex: 0 0 42px;
	border-radius: 6px;
	overflow: hidden;
}
/* @photo42:end */


/* ==== CHIPS IM KUNDEN-KOPF (0.1.148, Ferenc 2026-07-29) =================
   „In process" und „Wishlist" waren unterschiedlich gross — sie kommen aus
   zwei getrennten Regeln: der Status 12px mit margin-top:5px, die Herkunft
   10px mit min-height:19px. Hier tragen beide dieselben Masse, die der
   Wishlist-Marke (Ferencs Wahl).

   OHNE FLAECHE, nur Rahmen und Schrift (Ferenc). Auf dem schwarzen Kopf sind
   die hellen Tuepfelchen der Listen-Chips ohnehin fehl am Platz; `border:
   1px solid currentColor` haelt Rahmen und Text automatisch in derselben
   Farbe, also gibt es je Zustand nur EINEN Wert zu pflegen.

   BEWUSST NUR IM KOPF (.asl4-head): dieselben Klassen tragen in der
   Kundenliste ihre gefuellten Marken weiter — dort stehen sie auf Weiss und
   sollen sich abheben. */
/* @headchips:start */
.abc-asl-modern .asl4-head .abc-cf-status,
.abc-asl-modern .asl4-head .asl2-flag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0;
	min-height: 20px;
	padding: 2px 9px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	background: transparent;
	border: 1px solid currentColor;
}

/* Je Zustand eine Farbe — Rahmen und Schrift folgen ihr. Die hellen Toene der
   Navigationsleiste, nicht die dunklen der Listen: auf Schwarz waeren
   --abc-green und --abc-amber kaum lesbar. */
.abc-asl-modern .asl4-head .abc-cf-status--new { color: #7fa2ec; }
.abc-asl-modern .asl4-head .abc-cf-status--searching { color: #46c690; }
.abc-asl-modern .asl4-head .abc-cf-status--replied,
.abc-asl-modern .asl4-head .abc-cf-status--follow_up { color: #e0a53f; }
.abc-asl-modern .asl4-head .abc-cf-status--waiting_reply,
.abc-asl-modern .asl4-head .abc-cf-status--paused { color: #8a8a92; }
.abc-asl-modern .asl4-head .abc-cf-status--closed { color: #d4d4d8; }

.abc-asl-modern .asl4-head .asl2-flag--source-single_property { color: #7fa2ec; }
.abc-asl-modern .asl4-head .asl2-flag--source-wishlist { color: #e0a53f; }
.abc-asl-modern .asl4-head .asl2-flag--source-website,
.abc-asl-modern .asl4-head .asl2-flag--source-agent { color: #8a8a92; }
/* @headchips:end */


/* ==== KOPF DER KUNDENAUSWAHL (0.1.149, Ferenc 2026-07-29) ================
   Variante 3 mit der Akzentfarbe aus 4: EIN Block statt zwei — Ring, Titel und
   Knoepfe in einer Zeile auf zartem Blau. Damit hebt sich die Auswahl vom Weiss
   der Liste ab, ohne mit dem schwarzen Kundenkopf zu streiten (heller Tint,
   nicht die volle Akzentfarbe).

   ⚠ Diese Regeln standen schon einmal hier und sind beim Umschreiben des
   Tab-Blocks (0.1.143) verlorengegangen — der Kopf war seitdem unformatiert
   weiss. Deshalb liegen sie jetzt in einem EIGENEN markierten Block, nicht im
   Tab-Block. */
/* @trayhead:start */
/* ⚠ EBENFALLS VERLOREN beim Umschreiben des Tab-Blocks (0.1.143): die schmale
   Zeile unter den Tabs — wie viele Objekte, woher, wie viele pro Seite. Sie war
   seitdem unformatiert. Steht jetzt hier, im Block, der bleibt. */
.abc-asl-modern .asl4-metabar {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 7px 13px;
	background: #fafafa;
	border-bottom: 1px solid var(--abc-line);
	font-size: 11px;
	color: var(--abc-muted);
}
.abc-asl-modern .asl4-metasub { color: var(--abc-muted); }
.abc-asl-modern .asl4-metasp { flex: 1 1 auto; }

/* ⚠ ZUM ZWEITEN MAL: der eigene Innenabstand der Spalte muss weg.
   `.selection-tray` bringt 14px mit, waehrend Kopfzeile, Statistik, Ablegeflaeche
   und Liste ihre Abstaende schon selbst tragen — dadurch enden deren Trennlinien
   14px vor der Kante und es sieht aus wie ein Kasten im Kasten. Die Regel stand
   schon einmal hier und ist beim Umschreiben des Tab-Blocks (0.1.143) mit
   verschwunden, zusammen mit den Kopf-Regeln darunter. Deshalb liegt sie jetzt
   IN DIESEM Block: wer den Kopf der Auswahl anfasst, sieht sie. */
.abc-asl-modern .asl4-detail .selection-tray { padding: 0; overflow: hidden; }

.abc-asl-modern .asl4-trayhead {
	display: flex;
	align-items: center;
	gap: 11px;
	flex-wrap: nowrap;
	padding: 11px 12px;
	background: var(--abc-accent-soft);
	border-bottom: 1px solid var(--abc-accent-line);
}
.abc-asl-modern .asl4-trayhead .asl2-tray-title { flex: 1 1 auto; min-width: 0; display: block; }
.abc-asl-modern .asl4-trayhead .asl2-tray-title h3 { font-size: 12.5px; color: var(--abc-accent-ink); }
.abc-asl-modern .asl4-trayhead .asl2-chipname { background: var(--abc-surface); color: var(--abc-accent-ink); }

/* Der Statistik-Block ist hier nur noch der RING: seine Ueberschrift faellt weg
   (der Ring sagt es selbst), die vier Zaehler ruecken unter den Titel. */
.abc-asl-modern .asl4-trayhead .asl2-stats { flex: 0 0 auto; padding: 0; border: 0; gap: 0; }
.abc-asl-modern .asl4-trayhead .asl2-stats-txt { display: none; }
.abc-asl-modern .asl4-trayhead .asl2-donut { width: 42px; height: 42px; }

/* Der Ring in der Akzentfarbe statt Gruen: er misst „wie viel ist beantwortet",
   nicht „gut oder schlecht" — Gruen sagte das Falsche. */
.abc-asl-modern .asl4-trayhead .asl2-donut-arc { stroke: var(--abc-accent); stroke-width: 5; }
.abc-asl-modern .asl4-trayhead .asl2-donut-track { stroke: rgba(68, 107, 194, .2); stroke-width: 5; }
.abc-asl-modern .asl4-trayhead .asl2-donut-num { fill: var(--abc-accent-ink); font-size: 13px; }

/* Die vier Zaehler kompakt unter den Titel — dieselben Anker wie vorher. */
.abc-asl-modern .asl4-trayhead .asl2-tray-title .asl2-legend {
	margin-top: 4px;
	gap: 2px 9px;
	font-size: 10px;
	color: var(--abc-accent-ink);
}

/* Knoepfe UNTEREINANDER (Ferenc): nebeneinander drueckten sie den Titel auf
   eine Zeile Breite. Untereinander bleibt links Platz fuer Ring und Text, und
   „Senden" — die wichtigste Handlung der Seite — steht in voller Breite. */
.abc-asl-modern .asl4-trayhead .asl2-tray-actions {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 5px;
	margin-left: auto;
}
.abc-asl-modern .asl4-trayhead .asl2-tray-actions form { display: block; }
.abc-asl-modern .asl4-trayhead .asl2-tray-actions .btn {
	width: 100%;
	justify-content: center;
	/* weisse Flaeche, sonst verschwinden die Raender im blauen Tint */
	background: var(--abc-surface);
}
.abc-asl-modern .asl4-trayhead .asl2-tray-actions .btn-primary {
	background: var(--abc-ink);
	border-color: var(--abc-ink);
	color: #fff;
}
/* @trayhead:end */


/* ==== AKTIONS-KNOEPFE, EINHEITLICH (0.1.153, Ferenc 2026-07-29) ==========
   Die Trefferzeile hatte 27x27 mit 15px-Symbolen, die Auswahl-Karte seit
   0.1.148 24x24 mit 13px. Beide Reihen stehen nebeneinander auf einer Seite,
   also muessen sie dieselbe Groesse haben — hier die kleinere.

   Auch das „ist schon in der Auswahl"-Haekchen bekommt genau dieses Mass: es
   tritt an die STELLE des Hinzufuegen-Knopfes, und ein Unterschied liesse die
   Zeile beim Umschalten springen. */
/* @actionbtns:start */
.abc-asl-modern .asl2-rowactions .icon-btn,
.abc-asl-modern .asl2-rowactions .asl2-add-btn,
.abc-asl-modern .asl2-rowactions .asl2-insel,
.abc-asl-modern .asl2-insel {
	width: 24px;
	height: 24px;
	min-width: 24px;
	min-height: 24px;
	border-radius: 5px;
}
.abc-asl-modern .asl2-rowactions .icon-btn svg.abc-cf-ic,
.abc-asl-modern .asl2-rowactions .asl2-add-btn svg.abc-cf-ic,
.abc-asl-modern .asl2-insel svg { width: 13px; height: 13px; }

/* Das Haekchen DUNKELGRUEN (Ferenc): --abc-green (#059669) wirkte auf dem
   hellgruenen Feld zu blass. --abc-green-ink ist der dunklere Zwilling, der im
   Projekt genau dafuer existiert — dunkel genug, um als „erledigt" zu lesen. */
.abc-asl-modern .asl2-insel {
	color: var(--abc-green-ink);
	background: var(--abc-green-soft);
	border: 1px solid color-mix(in srgb, var(--abc-green-ink) 30%, transparent);
	border-radius: 50%;
}

/* Loeschen in der Auswahl DUNKELROT statt blau (Ferenc): der Knopf entfernt ein
   Objekt aus der Auswahl des Kunden — das ist die einzige zerstoerende Handlung
   in der Karte und darf nicht wie die beiden harmlosen daneben aussehen.
   Angesprochen ueber type="submit": die anderen beiden sind type="button", also
   braucht die Vorlage keine neue Klasse (und die beiden Bausteine bleiben
   unangetastet, wie vereinbart). */
.abc-asl-modern .selection-tray-item__actions button[type="submit"] {
	color: var(--abc-danger);
	border-color: color-mix(in srgb, var(--abc-danger) 35%, transparent);
}
.abc-asl-modern .selection-tray-item__actions button[type="submit"]:hover,
.abc-asl-modern .selection-tray-item__actions button[type="submit"]:focus-visible {
	color: var(--abc-danger);
	border-color: var(--abc-danger);
	background: var(--abc-surface);
}
/* @actionbtns:end */


/* ==== KURZMELDUNGEN OBEN MITTIG (0.1.155, Ferenc 2026-07-29) =============
   „Alle Infos oben anzeigen." Vorher zwei Wege fuer dieselbe Sache: eine
   Meldung im Seitenfluss (`.abc-asl-message`, weit oben, leicht zu uebersehen)
   und eine kleine Zeile am Senden-Knopf. Jetzt EIN Ort.

   Erfolg verschwindet von selbst, Fehler bleiben stehen: einen Erfolg muss
   niemand bestaetigen, einen Fehler schon. */
/* @toast:start */
/* KEIN Nachfahren-Selektor, sondern beide Klassen am SELBEN Element: der Host
   haengt an document.body und traegt `abc-asl-modern asl4-toasts` selbst (siehe
   abcToast() im JS). Die Regeln fuer die Kinder darunter bleiben unveraendert
   Nachfahren-Selektoren — sie treffen, weil der Host die Klasse traegt. */
.abc-asl-modern.asl4-toasts {
	position: fixed;
	top: 18px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	pointer-events: none;
	width: min(560px, calc(100vw - 32px));
}
.admin-bar .abc-asl-modern.asl4-toasts { top: 50px; }

.abc-asl-modern .asl4-toast {
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	gap: 9px;
	padding: 10px 13px;
	border-radius: 9px;
	border: 1px solid;
	box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .3);
	font-size: 12px;
	line-height: 1.45;
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .18s, transform .18s;
}
.abc-asl-modern .asl4-toast.is-in { opacity: 1; transform: translateY(0); }
.abc-asl-modern .asl4-toast--ok { background: #e1f5ee; border-color: #9fe1cb; color: #0f6e56; }
.abc-asl-modern .asl4-toast--bad { background: #fceceb; border-color: #f09595; color: #a32d2d; }
.abc-asl-modern .asl4-toast svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.abc-asl-modern .asl4-toast-title { font-weight: 600; display: block; }
.abc-asl-modern .asl4-toast-detail { display: block; margin-top: 2px; font-size: 11px; opacity: .9; }
.abc-asl-modern .asl4-toast-x {
	margin-left: 4px;
	border: 0;
	background: transparent;
	color: inherit;
	opacity: .55;
	cursor: pointer;
	font-size: 15px !important;
	line-height: 1;
	padding: 0 2px;
}
.abc-asl-modern .asl4-toast-x:hover { opacity: 1; }
/* @toast:end */