/*
 * DOMAINS · EXPAND
 *
 * Encoding: ASCII-only. Nicht durch BPM_ENCODING.
 * content: "..." nur CSS-Escapes (\00FC, \20AC).
 *
 * Transparente Pocket:
 * - geschlossen: 0px
 * - offen: Höhe wird ausschließlich durch den Inhalt bestimmt
 * - nach dem Inhalt bleiben 35px Luft bis zur nächsten Domainzeile
 * - keinerlei eigene Hintergrundfläche
 */

.dpl-expand-tr-closed {
	display: none !important;
}

.dpl-expand-tr,
.dpl-expand-td,
.dpl-expand-pocket,
.dpl-expand-content,
.dpl-expand,
.dpl-expand-panel {
	background: transparent !important;
}

.dpl-expand-tr {
	border: 0 !important;
}

.dpl-expand-td {
	padding: 0 !important;
	border: 0 !important;
	overflow: visible !important;
	vertical-align: top;
}

.dpl-expand-tld-rail {
	background: transparent !important;
}

.dpl-expand-work-td,
.dpl-expand-buy-rail {
	background: transparent !important;
}

.dpl-expand-pocket {
	display: block;
	width: 100%;
	height: 0;
	box-sizing: border-box;
	overflow: hidden;

	will-change: height;
}

/*
 * Nach abgeschlossener Öffnungsanimation dürfen
 * Status-Badges und Zähler über die Workstationkante
 * hinausragen.
 *
 * Während OPEN/CLOSE bleibt overflow:hidden bestehen,
 * damit die Höhenanimation sauber arbeitet.
 */

.dpl-expand-tr-open
	.dpl-expand-pocket {
	overflow: visible;
}

.dpl-expand-content {
	display: block;
	width: 100%;
	box-sizing: border-box;

	opacity: 0;
	will-change: opacity;
}

.dpl-expand {
	box-sizing: border-box;

	/*
	 * Die komplette Arbeitsflaeche nutzt die Breite
	 * zwischen TLD- und Warenkorbspalte.
	 *
	 * Nur die Tabzeile bleibt bewusst kompakt und
	 * wirkt als zentrierter "Hueftguertel".
	 */
	padding: 12px 0 35px;

	border: 0;
	text-align: left;
}

.dpl-expand-panel {
	margin: 0;
	padding: 0;
	border: 0;
}


/*
 * Während Öffnen/Schließen noch keine Bedienung
 * innerhalb der bewegten Tasche.
 */
.dpl-expand-tr-opening .dpl-expand-content,
.dpl-expand-tr-closing .dpl-expand-content {
	pointer-events: none;
}


/*
 * WORKSTATION TABS
 *
 * PORTAL TACTILE HYBRID
 * - sehr feine plastische Einfassung
 * - keine LED
 * - weicher Hover
 * - echter Pressweg
 */

.dpl-expand-tabs {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 7px;

	margin: 0 0 14px;
	padding: 2px 8px 8px;
}

.dpl-expand-tab {
	position: relative;

	display: inline-block;

	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;

	font-family: Arial, Helvetica, sans-serif;

	color: inherit;
	text-decoration: none;

	cursor: pointer;

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

a.dpl-expand-tab,
a.dpl-expand-tab:link,
a.dpl-expand-tab:visited,
a.dpl-expand-tab:hover,
a.dpl-expand-tab:active {
	color: inherit;
	text-decoration: none;
}

.dpl-expand-tab:focus-visible {
	outline: 2px solid rgba(0, 102, 153, .18);
	outline-offset: 2px;

	border-radius: 8px;
}

.dpl-expand-tab-socket {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 1px;

	border-radius: 7px;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .92) 0%,
			rgba(233, 237, 239, .96) 100%
		);

	box-shadow:
		0 0 0 1px rgba(194, 201, 205, .42),
		0 1px 2px rgba(0, 0, 0, .06),
		inset 0 1px 0 rgba(255, 255, 255, .95),
		inset 0 -1px 1px rgba(120, 129, 134, .10);

	transition:
		background .18s ease,
		box-shadow .18s ease,
		transform .10s ease;
}

.dpl-expand-tab-cap {
	position: relative;

	display: flex;
	align-items: center;
	justify-content: center;

	min-width: 92px;
	height: 28px;

	padding: 0 13px;

	border: 1px solid rgba(202, 208, 212, .58);
	border-radius: 5px;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .98) 0%,
			rgba(255, 255, 255, .70) 18%,
			rgba(255, 255, 255, 0) 42%
		),
		linear-gradient(
			to bottom,
			#fbfbfb 0%,
			#eceff0 58%,
			#e0e4e6 100%
		);

	color: #5c666c;

	font: 700 12px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .045em;

	white-space: nowrap;

	text-shadow:
		0 1px 0 rgba(255, 255, 255, .90);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 1px rgba(90, 100, 106, .05),
		0 1px 1px rgba(0, 0, 0, .06);

	transform: translateY(-.5px);

	transition:
		transform .11s ease,
		background .16s ease,
		border-color .16s ease,
		box-shadow .16s ease,
		color .16s ease,
		filter .16s ease;
}

.dpl-expand-tab-cap::before {
	content: "";

	position: absolute;
	top: 3px;
	left: 9px;
	right: 9px;

	height: 5px;

	border-radius: 50%;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .52),
			rgba(255, 255, 255, 0)
		);

	opacity: .9;

	pointer-events: none;
}

.dpl-expand-tab-wide .dpl-expand-tab-cap {
	min-width: 140px;
}


/*
 * OFFENE BESTELLAUSWAHL
 *
 * Fester Status-Slot unter der Haupt-Tab-Leiste.
 * Auch im DOMAIN-Tab bleibt exakt dieselbe Hoehe reserviert,
 * damit beim Umschalten keinerlei Layoutsprung entsteht.
 */
.dpl-precart-order-pending {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 6px;

	width: max-content;
	max-width: calc(100% - 12px);
	min-height: 18px;

	margin: -6px auto 13px;
	padding: 2px 6px;

	border: 0;
	background: transparent;

	color: #8d1a1a;

	font: 500 8.5px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .045em;

	cursor: pointer;
	white-space: nowrap;

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

/*
 * hidden nimmt den Status NICHT aus dem Layout.
 * So bleibt der Abstand unter den Tabs auf DOMAIN,
 * DETAILS & PREISE und SERVICE identisch.
 */
.dpl-precart-order-pending[hidden] {
	display: flex !important;
	visibility: hidden;
	pointer-events: none;
}

.dpl-precart-order-pending-led {
	display: block;

	flex: 0 0 8px;

	width: 8px;
	height: 8px;

	border: 0;
	border-radius: 50%;

	background: #c40000;

	opacity: 0;
	box-shadow: none;

	animation:
		dplPendingOrderLedBlink
		.72s ease-in-out infinite;
}

.dpl-precart-order-pending-copy {
	color: #9b1b1b;
	font-weight: 500;

	animation:
		dplPendingOrderMessageBlink
		.72s ease-in-out infinite;
}

.dpl-precart-order-pending-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 12px;

	width: 12px;
	height: 12px;

	margin-left: 1px;

	color: #202020;

	/* Das Link-/Pfeil-Icon bleibt ruhig; nur LED + Hinweistext pulsieren. */
	animation: none;
	opacity: 1;

	transition:
		color .14s ease,
		transform .14s ease;
}

.dpl-precart-order-pending-action svg {
	display: block;

	width: 11px;
	height: 11px;

	fill: none;
	stroke: currentColor;
	stroke-width: 1.25;
	stroke-linecap: square;
	stroke-linejoin: miter;
}

.dpl-precart-order-pending:hover
	.dpl-precart-order-pending-action {
	color: #000000;

	transform:
		translate(1px, -1px);
}

.dpl-precart-order-pending:active
	.dpl-precart-order-pending-action {
	transform: none;
}

.dpl-precart-order-pending:hover
	.dpl-precart-order-pending-copy {
	color: #b00000;

	animation: none;
	opacity: 1;
}

/*
 * Hover: der Hinweis selbst wird ruhig und sofort lesbar.
 * Nur die rote Status-LED blinkt weiter.
 */
.dpl-precart-order-pending:hover
	.dpl-precart-order-pending-action {
	animation: none;
	opacity: 1;
}

.dpl-precart-order-pending:focus-visible {
	outline: 1px dotted rgba(0, 102, 153, .58);
	outline-offset: 2px;
}

@keyframes dplPendingOrderLedBlink {
	0%,
	15%,
	100% {
		opacity: .10;
	}

	42%,
	60% {
		opacity: 1;
	}
}


@keyframes dplPendingOrderMessageBlink {
	0%,
	15%,
	100% {
		opacity: .22;
	}

	42%,
	60% {
		opacity: 1;
	}
}

/*
 * HOVER
 */

.dpl-expand-tab:hover:not(.active):not(:active) .dpl-expand-tab-socket {
	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .98) 0%,
			rgba(228, 233, 236, .98) 100%
		);

	box-shadow:
		0 0 0 1px rgba(160, 170, 176, .55),
		0 3px 5px rgba(0, 0, 0, .10),
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 1px rgba(120, 129, 134, .10);
}

.dpl-expand-tab:hover:not(.active):not(:active) .dpl-expand-tab-cap {
	color: #1e272c;

	border-color: rgba(168, 176, 182, .70);

	transform: translateY(-1px);

	filter: brightness(1.03);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 1),
		inset 0 -1px 1px rgba(90, 100, 106, .05),
		0 2px 3px rgba(0, 0, 0, .10);
}


/*
 * PRESSED / ACTIVE
 */

.dpl-expand-tab:active .dpl-expand-tab-socket,
.dpl-expand-tab.active .dpl-expand-tab-socket {
	background:
		linear-gradient(
			to bottom,
			rgba(235, 239, 241, .98) 0%,
			rgba(223, 228, 230, .98) 100%
		);

	box-shadow:
		0 0 0 1px rgba(187, 194, 198, .44),
		inset 0 1px 1px rgba(97, 107, 112, .13),
		inset 0 -1px 0 rgba(255, 255, 255, .25),
		0 1px 1px rgba(255, 255, 255, .72);
}

.dpl-expand-tab:active .dpl-expand-tab-cap,
.dpl-expand-tab:hover:active .dpl-expand-tab-cap,
.dpl-expand-tab.active .dpl-expand-tab-cap {
	transform: translateY(1px);

	border-color: rgba(0, 78, 116, .58);

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .20),
			rgba(255, 255, 255, 0) 34%
		),
		linear-gradient(
			to bottom,
			#1882ad 0%,
			#006699 58%,
			#00486d 100%
		);

	color: #ffffff;

	text-shadow:
		0 -1px 0 rgba(0, 38, 57, .32);

	box-shadow:
		inset 0 2px 3px rgba(0, 48, 72, .22),
		inset 0 -1px 0 rgba(255, 255, 255, .11),
		0 1px 1px rgba(0, 46, 69, .14);
}


/*
 * GENERELLE WORKSTATION-INHALTE
 */

.dpl-expand-panel[hidden] {
	display: none !important;
}

/*
 * GEMEINSAME TYPOGRAFIE · WORKSTATION
 *
 * Kicker: DOMAINPRÜFUNG / DETAILS / SERVICE / ZUSATZKONFIGURATION
 */
.dpl-ui-kicker {
	margin: 0 0 20px;
	color: #7b878d;
	font: 600 8px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .105em;
}

/*
 * Gemeinsame Abschnittsheader:
 * WHOIS / STATUS, WEITERE AUSWAHL UND DIENSTE,
 * STAFFELPREISE / PREISENTWICKLUNG, nummerierte DETAILS-Sektionen
 * sowie die SERVICE-Abschnittsheader.
 * Icons, Nummern und Geometrie bleiben in den jeweiligen Modulen.
 */
.dpl-ui-section-heading {
	color: #000000 !important;
	font: 800 12px/1.1 Arial, Helvetica, sans-serif !important;
	letter-spacing: .025em;
}

/*
 * Gemeinsames 15px-Infoicon fuer Abschnittsheader.
 * Positionierung/Inhalt bleiben beim jeweiligen Modul.
 */
/* Gemeinsame 15px-Kappe fuer Info-, Symbol- und Plus-Header. */
.dpl-ui-icon-cap {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 15px;
	height: 15px;
	box-sizing: border-box;

	border: 1px solid #888888;
	border-radius: 2px;

	background:
		linear-gradient(
			to bottom,
			#ffffff 0%,
			#edf2f3 100%
		);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.95),
		0 1px 1px rgba(0,0,0,.08);
}

/*
 * Gemeinsamer Standard-Erklaerungstext der Workstation.
 * Gilt tabuebergreifend fuer DOMAIN, DETAILS und SERVICE.
 */
.dpl-ui-copy {
	color: #555555;
	font: 400 12px/1.42 Arial, Helvetica, sans-serif;
	line-height: 1.25em;
}

/*
 * GEMEINSAME EINGABEFELD-PHYSIK · WORKSTATION
 *
 * Technische DOMAIN-Felder, SERVICE-Login, SERVICE-Anfrage und
 * die Textfelder des SERVICE-Kontoantrags verwenden dieselbe
 * leicht gruenliche, eingelassene Oberflaeche. Groessen und
 * Formulargeometrien bleiben in den jeweiligen Modulen.
 * Selectfelder des Kontoantrags bleiben bewusst weiss.
 */
.dpl-ui-input,
.dpl-service-login-form .login1 input,
.dpl-service-login-form .login2 input,
.dpl-service-shared-account
	#maispCustomerForm
	input.maisp-control {
	border: 1px solid #aeb9b1;
	border-radius: 4px;
	background:
		linear-gradient(
			to bottom,
			rgba(237, 242, 238, .92) 0%,
			rgba(247, 250, 247, .84) 100%
		);
	color: #303840;
	outline: 0;
	box-shadow:
		inset 0 2px 4px rgba(44, 58, 47, .13),
		inset 0 -1px 0 rgba(255, 255, 255, .78);
	transition:
		border-color .14s ease,
		background .14s ease,
		box-shadow .14s ease;
}

.dpl-ui-input:focus,
.dpl-service-login-form .login1 input:focus,
.dpl-service-login-form .login2 input:focus,
.dpl-service-shared-account
	#maispCustomerForm
	input.maisp-control:focus {
	border-color: #7897a5;
	background:
		linear-gradient(
			to bottom,
			#edf5f7 0%,
			#f8fbfc 100%
		);
	box-shadow:
		inset 0 2px 4px rgba(33, 72, 89, .14),
		0 0 0 1px rgba(0, 102, 153, .05);
}


/*
 * DOMAIN
 */

.dpl-domain-area {
	padding: 1px 0 18px;
}

.dpl-domain-search-row {
	display: flex;
	align-items: center;

	gap: 7px;

	width: 100%;
	box-sizing: border-box;
}

.dpl-domain-search-input {
	flex: 1 1 auto;

	min-width: 0;
	height: 36px;

	margin: 0;
	padding: 0 10px;

	border: 1px solid #aeb9b1;
	border-radius: 5px;

	background:
		linear-gradient(
			to bottom,
			#edf2ee 0%,
			#f3f6f3 28%,
			#f7faf7 100%
		);

	color: #303840;

	font: 12px Arial, Helvetica, sans-serif;

	outline: 0;

	box-shadow:
		inset 0 3px 5px rgba(44, 58, 47, .18),
		inset 0 1px 1px rgba(20, 34, 23, .09),
		inset 1px 0 2px rgba(44, 58, 47, .07),
		inset -1px 0 0 rgba(255, 255, 255, .58),
		inset 0 -1px 0 rgba(255, 255, 255, .82);

	transition:
		border-color .12s ease,
		background .12s ease,
		box-shadow .12s ease;
}

.dpl-domain-search-input:focus {
	border-color: #8da992;

	background:
		linear-gradient(
			to bottom,
			#eaf1eb 0%,
			#f2f7f3 30%,
			#f8fbf8 100%
		);

	box-shadow:
		inset 0 3px 5px rgba(39, 67, 44, .21),
		inset 0 1px 1px rgba(24, 49, 29, .10),
		inset 1px 0 2px rgba(39, 67, 44, .08),
		inset -1px 0 0 rgba(255, 255, 255, .62),
		inset 0 -1px 0 rgba(255, 255, 255, .86);

	outline: 0;
}

.dpl-domain-search-tld {
	flex: 0 0 auto;

	color: #303840;

	font: 600 13px/1 Arial, Helvetica, sans-serif;
}


/*
 * PRÜFEN
 *
 * zunächst AAM-artiges Grunddesign.
 * Feintuning erfolgt nach Einbau.
 */

.dpl-domain-check {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 7px;

	flex: 0 0 104px;

	width: 104px;
	height: 36px;

	margin: 0;
	padding: 0 10px;

	overflow: hidden;

	border: 1px solid #740000;
	border-radius: 6px;

	background:
		linear-gradient(
			to bottom,
			#dc2323 0%,
			#bb0000 52%,
			#7f0000 100%
		);

	color: #ffffff;

	cursor: pointer;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .26),
		inset 0 -1px 0 rgba(55, 0, 0, .40),
		0 2px 4px rgba(91, 0, 0, .25);

	transition:
		transform .14s ease,
		filter .14s ease,
		box-shadow .14s ease;
}

.dpl-domain-check::before {
	content: "";

	position: absolute;
	top: -70%;
	left: -65%;

	width: 70%;
	height: 230%;

	background:
		linear-gradient(
			to right,
			transparent,
			rgba(255, 255, 255, .42),
			transparent
		);

	transform: rotate(24deg);

	transition:
		left .32s ease;
}

.dpl-domain-check:hover::before {
	left: 115%;
}

.dpl-domain-check:hover {
	transform: translateY(-1px);

	filter: brightness(1.07);
}

.dpl-domain-check:active {
	transform:
		translateY(1px)
		scale(.97);

	box-shadow:
		inset 0 2px 5px rgba(0, 0, 0, .32);
}

.dpl-domain-check-icon {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 18px;
	height: 18px;

	flex: 0 0 18px;
}

.dpl-domain-check-icon svg {
	display: block;

	width: 18px;
	height: 18px;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dpl-domain-check-label {
	position: relative;
	z-index: 1;

	font: 700 9px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .3px;

	white-space: nowrap;
}


/*
 * WHOIS / STATUS
 */

.dpl-domain-status {
	display: flex;
	flex-direction: column;

	gap: 3px;

	width: 100%;
	box-sizing: border-box;

	margin: 15px 0 0;
	padding: 7px 9px 13px;

	border-top: 1px solid #e1e5e7;
	border-bottom: 0;

	background:
		linear-gradient(
			to bottom,
			rgba(248, 249, 249, .82) 0%,
			rgba(248, 249, 249, .52) 34%,
			rgba(248, 249, 249, .22) 64%,
			rgba(248, 249, 249, 0) 100%
		);

	color: #758086;

	font: 400 9px/1.35 Arial, Helvetica, sans-serif;
}

.dpl-domain-status strong {
	color: #3c484e;

	font-weight: 600;
}


/*
 * DOMAIN OPTIONEN
 */

.dpl-domain-options {
	display: flex;
	flex-wrap: wrap;

	gap: 5px;

	width: 100%;
	box-sizing: border-box;

	margin-top: 14px;
}

.dpl-domain-options button {
	height: 27px;

	padding: 0 8px;

	border: 1px solid #d0d5d8;
	border-radius: 4px;

	background:
		linear-gradient(
			to bottom,
			#ffffff,
			#f1f3f3
		);

	color: #566168;

	font: 500 8px/1 Arial, Helvetica, sans-serif;

	box-shadow:
		inset 0 1px 0 #ffffff;
}

.dpl-domain-options button:disabled {
	opacity: .72;
}

.dpl-domain-options .dpl-domain-option-secure {
	border-color: #c7c1a6;

	background:
		linear-gradient(
			to bottom,
			#fffdf7,
			#f4f0df
		);

	color: #655a2e;
}


/*
 * DETAILS & PREISE sowie SERVICE besitzen eigene Assets:
 * details.css / service.css
 */


/*
 * PRE-CART · WORKSTATION-TABS
 *
 * Die eigentliche Merkliste ist nur im DOMAIN-Tab sichtbar.
 * DETAILS & PREISE / SERVICE zeigen nur den separaten
 * Bestellhinweis unter der Tabreihe.
 */
.dpl-expand[data-dpl-active-tab="details"]
	[data-dpl-precart],
.dpl-expand[data-dpl-active-tab="service"]
	[data-dpl-precart] {
	display: none !important;
}


/*
 * LIGHT PRE-CART
 *
 * Liegt bewusst AUSSERHALB der Tab-Panels.
 */

.dpl-expand-precart {
	display: flex;
	align-items: center;

	gap: 8px;

	min-height: 38px;

	margin: 0;
	padding: 6px 7px;

	border-top: 1px solid #d7dcde;
	border-bottom: 1px solid #e4e7e8;

	background:
		linear-gradient(
			90deg,
			rgba(246, 247, 247, .92),
			rgba(255, 255, 255, 0)
		);
}

.dpl-expand-precart > strong {
	flex: 0 0 auto;

	color: #303a3f;

	font: 600 8.5px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .055em;

	white-space: nowrap;
}

.dpl-expand-precart > span {
	flex: 1 1 auto;

	min-width: 0;

	color: #818b90;

	font: 400 8.5px/1 Arial, Helvetica, sans-serif;

	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dpl-expand-precart-actions {
	display: flex;
	align-items: center;

	gap: 4px;

	flex: 0 0 auto;
}

.dpl-expand-precart-actions button {
	height: 23px;

	padding: 0 7px;

	border: 1px solid #d1d6d8;
	border-radius: 4px;

	background:
		linear-gradient(
			to bottom,
			#ffffff,
			#eff1f2
		);

	color: #59646a;

	font: 600 7px/1 Arial, Helvetica, sans-serif;
}

.dpl-expand-precart-actions button:disabled {
	opacity: .48;
}

/*
 * TABLE FOCUS
 *
 * Im Fokusmodus bleibt im tbody nur der komplette
 * Block der aktiven Domain sichtbar.
 *
 * Tabellenkopf / obere Pagination sowie Footer-Pagination
 * bleiben als ruhiger Tabellenrahmen stehen und werden
 * auf 20 Prozent gedimmt.
 *
 * Die beiden DOMAINLISTE / ALLES ANZEIGEN-Gates liegen
 * technisch im tbody, optisch aber exakt ueber den
 * jeweiligen Pagination-Reihen.
 */

.dpl-focus-hidden {
	display: none !important;
}

#domains-preisliste.dpl-focus-corridor-active
	.dpl-filter-shell {
	position: relative;
	z-index: 1;

	opacity: .20;

	filter:
		grayscale(.35)
		saturate(.72);

	pointer-events: none;

	transition:
		opacity .16s ease,
		filter .16s ease;
}

#domains-preisliste.dpl-focus-corridor-active
	.dpl-filter-shell
	.dpl-filter-head {
	position: relative;
	z-index: 1;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

#domains-preisliste.dpl-focus-corridor-active
	.dpl-table-wrap {
	position: relative;
	z-index: 2;
	/* Focus-Lift: Gate knapp ueber Filter, plus 50px. Nur dieser Wert. */
	margin-top: -120px;
}


/*
 * Der 35px-Schlussabstand wird im Table-Focus
 * als eigene Tabellenzeile erzeugt.
 */
#domains-preisliste.dpl-focus-corridor-active
	.dpl-expand {
	padding-bottom: 0;
}


/*
 * TABELLENRAHMEN IM FOCUS
 *
 * Gate-Controls liegen NICHT in thead/tfoot und
 * erben deshalb diese Opacity bewusst nicht.
 */
#domains-preisliste.dpl-focus-corridor-active
	.dpl-table > thead,
#domains-preisliste.dpl-focus-corridor-active
	.dpl-table > tfoot {
	position: relative;
	z-index: 1;

	opacity: .20;

	filter:
		grayscale(.35)
		saturate(.72);

	pointer-events: none;

	transition:
		opacity .16s ease,
		filter .16s ease;
}


/*
 * Aktive Domain bleibt vollwertig sichtbar.
 */
#domains-preisliste.dpl-focus-corridor-active
	.dpl-table tbody tr.dpl-main-tr.dpl-focus-active {
	opacity: 1;
	filter: none;
}


/*
 * Gruppierungs-Dekoration im Focus abschalten.
 *
 * Dadurch bleiben keine einzelnen Klammer-/Underlay-
 * Fragmente um die isolierte aktive Domain stehen.
 */
#domains-preisliste.dpl-focus-corridor-active
	tbody tr.dpl-group-row {
	background: transparent !important;
}

#domains-preisliste.dpl-focus-corridor-active
	tbody tr.dpl-group-row > td:first-child::before,
#domains-preisliste.dpl-focus-corridor-active
	.dpl-group-rail-marker {
	display: none !important;
}


/*
 * TABLE FOCUS · DOMAINLISTE / ALLES ANZEIGEN
 *
 * Die Gate-Zeile selbst besitzt keine sichtbare Hoehe.
 * JS legt den 42px-Control exakt auf die vertikale Mitte
 * der oberen bzw. unteren Pagination-Reihe.
 */
.dpl-focus-gate {
	position: relative;
	z-index: 30;

	height: 0 !important;
}

.dpl-focus-gate > td {
	height: 0 !important;
	line-height: 0 !important;
	font-size: 0 !important;

	padding: 0 !important;
	border: 0 !important;

	background: transparent !important;
}

.dpl-focus-gate-cell {
	position: relative;
	z-index: 31;

	height: 0 !important;

	padding: 0 !important;

	background: transparent !important;

	overflow: visible !important;
}

.dpl-focus-gate-control {
	position: absolute;
	z-index: 40;

	left: 0;
	right: 0;
	top: 0;

	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;

	width: 100%;
	height: 42px;

	animation:
		dplFocusGateFade
		.16s ease-out both;
}


/*
 * Exakt 35px Ruhe zwischen Tabellenrahmen
 * und aktiver Domain-Workstation.
 */
.dpl-focus-active-gap > td {
	height: 35px !important;
	line-height: 35px !important;
	font-size: 0 !important;

	padding: 0 !important;
	border: 0 !important;

	background: transparent !important;
}


/*
 * GEZEICHNETE DOPPELWINKEL
 *
 * Keine typografischen Guillemets und keine Mittellinie.
 */

.dpl-focus-gate-chevrons {
	position: relative;

	display: block;

	flex: 0 0 28px;

	width: 28px;
	height: 30px;

	pointer-events: none;
	user-select: none;
}

.dpl-focus-gate-chevrons i {
	position: absolute;
	top: 50%;

	width: 4px;
	height: 18px;

	border-radius: 2px;

	background:
		linear-gradient(
			to right,
			#4f6069,
			#7e8c93 45%,
			#43545d
		);

	box-shadow:
		inset 1px 0 0 rgba(255, 255, 255, .36),
		0 1px 1px rgba(0, 0, 0, .12);

	transform-origin: center;

	translate: 0 0;
	opacity: 1;

	transition:
		translate .20s cubic-bezier(.22, .72, .24, 1),
		opacity .18s ease,
		background .14s ease;
}


/*
 * Hover-Richtungswechsel:
 *
 * Die vorhandenen Doppelwinkel fahren nur einen
 * kurzen Weg in ihre jeweilige Zeigerichtung und
 * verblassen dabei.
 *
 * Gleichzeitig erscheint an ihrer Ausgangsposition
 * ein professioneller Return-/Eckpfeil.
 */
.dpl-focus-gate-chevrons::after {
	content: "\21b4";

	position: absolute;
	z-index: 3;

	left: 50%;
	top: 50%;

	display: block;

	font:
		700 27px/.85
		"Segoe UI Symbol",
		"Arial Unicode MS",
		Arial,
		sans-serif;

	background:
		linear-gradient(
			to right,
			#005b86,
			#1680ac 45%,
			#00476b
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
	-webkit-text-fill-color: transparent;

	opacity: 0;

	filter:
		drop-shadow(
			0 1px 0
			rgba(255, 255, 255, .50)
		)
		drop-shadow(
			0 1px 1px
			rgba(0, 0, 0, .14)
		);

	pointer-events: none;

	transition:
		opacity .13s ease;
}


/*
 * UNTEN:
 *
 * rechts = Original ↴
 * links  = horizontal gespiegelt
 */
.dpl-focus-gate-after
	.dpl-focus-gate-chevrons-right::after {
	transform:
		translate(-50%, -50%);
}

.dpl-focus-gate-after
	.dpl-focus-gate-chevrons-left::after {
	transform:
		translate(-50%, -50%)
		scaleX(-1);
}


/*
 * OBEN:
 *
 * dieselben Formen zusätzlich vertikal gespiegelt.
 */
.dpl-focus-gate-before
	.dpl-focus-gate-chevrons-right::after {
	transform:
		translate(-50%, -50%)
		scaleY(-1);
}

.dpl-focus-gate-before
	.dpl-focus-gate-chevrons-left::after {
	transform:
		translate(-50%, -50%)
		scaleX(-1)
		scaleY(-1);
}


/*
 * Kurzer, schneller Impuls.
 *
 * Wegstrecke bewusst nur 8px.
 * Der Return-Pfeil beginnt leicht verzögert,
 * wenn die Doppelwinkel bereits verblassen.
 */
.dpl-focus-gate-control:hover
	.dpl-focus-gate-chevrons-left i {
	translate: -8px 0;
	opacity: 0;
}

.dpl-focus-gate-control:hover
	.dpl-focus-gate-chevrons-right i {
	translate: 8px 0;
	opacity: 0;
}

.dpl-focus-gate-control:hover
	.dpl-focus-gate-chevrons::after {
	opacity: 1;

	transition-delay: .055s;
}


/*
 * Oberes und unteres Gate gehören zusammen.
 *
 * Sobald eines der beiden Gates gehovert wird,
 * reagieren deshalb die Pfeile BEIDER Gates
 * gleichzeitig.
 */

#domains-preisliste.dpl-focus-corridor-active:has(
	.dpl-focus-gate-control:hover
)
	.dpl-focus-gate-chevrons-left i {
	translate: -8px 0;
	opacity: 0;
}

#domains-preisliste.dpl-focus-corridor-active:has(
	.dpl-focus-gate-control:hover
)
	.dpl-focus-gate-chevrons-right i {
	translate: 8px 0;
	opacity: 0;
}

#domains-preisliste.dpl-focus-corridor-active:has(
	.dpl-focus-gate-control:hover
)
	.dpl-focus-gate-chevrons::after {
	opacity: 1;

	transition-delay: .055s;
}

#domains-preisliste.dpl-focus-corridor-active:has(
	.dpl-focus-gate-control:hover
)
	.dpl-focus-gate-chevrons i {
	background:
		linear-gradient(
			to right,
			#005b86,
			#1680ac 45%,
			#00476b
		);
}


.dpl-focus-gate-chevrons-left i:nth-child(1) {
	left: 5px;
	transform: translateY(-78%) rotate(38deg);
}

.dpl-focus-gate-chevrons-left i:nth-child(2) {
	left: 5px;
	transform: translateY(-22%) rotate(-38deg);
}

.dpl-focus-gate-chevrons-left i:nth-child(3) {
	left: 14px;
	transform: translateY(-78%) rotate(38deg);
}

.dpl-focus-gate-chevrons-left i:nth-child(4) {
	left: 14px;
	transform: translateY(-22%) rotate(-38deg);
}

.dpl-focus-gate-chevrons-right i:nth-child(1) {
	right: 5px;
	transform: translateY(-78%) rotate(-38deg);
}

.dpl-focus-gate-chevrons-right i:nth-child(2) {
	right: 5px;
	transform: translateY(-22%) rotate(38deg);
}

.dpl-focus-gate-chevrons-right i:nth-child(3) {
	right: 14px;
	transform: translateY(-78%) rotate(-38deg);
}

.dpl-focus-gate-chevrons-right i:nth-child(4) {
	right: 14px;
	transform: translateY(-22%) rotate(38deg);
}


/*
 * BUTTON
 *
 * Inhalt bestimmt die Breite.
 */

.dpl-focus-gate-button {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: auto;
	height: 42px;

	margin: 0;
	padding: 0;

	border: 0;
	background: transparent;

	font-family: Arial, Helvetica, sans-serif;

	cursor: pointer;

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

.dpl-focus-gate-button:focus-visible {
	outline: 2px solid rgba(0, 102, 153, .20);
	outline-offset: 2px;
	border-radius: 9px;
}

.dpl-focus-gate-socket {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 42px;

	padding: 1px;

	border-radius: 8px;

	background:
		linear-gradient(
			to bottom,
			#fefefe 0%,
			#e7ecee 100%
		);

	box-shadow:
		0 0 0 1px rgba(188, 196, 200, .56),
		inset 0 1px 0 rgba(255, 255, 255, .98),
		inset 0 -1px 1px rgba(84, 95, 100, .08),
		0 2px 4px rgba(0, 0, 0, .08);

	transition:
		background .14s ease,
		box-shadow .14s ease,
		transform .10s ease;
}

.dpl-focus-gate-cap {
	position: relative;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	height: 40px;

	padding: 0 18px;

	border: 1px solid rgba(202, 208, 212, .68);
	border-radius: 7px;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .94) 0%,
			rgba(255, 255, 255, .60) 18%,
			rgba(255, 255, 255, 0) 44%
		),
		linear-gradient(
			to bottom,
			#fcfcfc 0%,
			#edf1f2 56%,
			#e2e7e9 100%
		);

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .99),
		inset 0 -1px 1px rgba(88, 97, 102, .05),
		0 1px 1px rgba(0, 0, 0, .04);

	transition:
		border-color .14s ease,
		background .14s ease,
		box-shadow .14s ease,
		transform .10s ease;
}

.dpl-focus-gate-cap::before {
	content: "";

	position: absolute;
	top: 3px;
	left: 14px;
	right: 14px;

	height: 5px;

	border-radius: 999px;

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .62),
			rgba(255, 255, 255, 0)
		);

	opacity: .94;

	pointer-events: none;
}


/*
 * Zweizeilige Beschriftung.
 */

.dpl-focus-gate-label {
	position: relative;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	line-height: 1;
}

.dpl-focus-gate-label-top {
	margin-bottom: 3px;

	padding-left: .34em;

	color: #73818a;

	font: normal 8px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .6em;

	white-space: nowrap;
}

.dpl-focus-gate-label-bottom {
	color: #2d3d45;

	font: 700 11px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .09em;

	white-space: nowrap;
}


/*
 * HOVER
 *
 * Bewusst nur heller Domain-Blau-Glanz.
 */

.dpl-focus-gate-button:hover
	.dpl-focus-gate-socket {
	background:
		linear-gradient(
			to bottom,
			#ffffff 0%,
			#eaf3f7 100%
		);

	box-shadow:
		0 0 0 1px rgba(121, 165, 184, .74),
		inset 0 1px 0 rgba(255, 255, 255, .99),
		0 2px 5px rgba(0, 86, 125, .13);
}

.dpl-focus-gate-button:hover
	.dpl-focus-gate-cap {
	border-color: rgba(113, 159, 178, .72);

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .96) 0%,
			rgba(255, 255, 255, .42) 32%,
			rgba(255, 255, 255, 0) 46%
		),
		linear-gradient(
			to bottom,
			#ffffff 0%,
			#eef6fa 60%,
			#dcecf3 100%
		);
}

.dpl-focus-gate-button:hover
	.dpl-focus-gate-label-top {
	color: #5d7885;
}

.dpl-focus-gate-button:hover
	.dpl-focus-gate-label-bottom {
	color: #006699;
}

.dpl-focus-gate-control:hover
	.dpl-focus-gate-chevrons i {
	background:
		linear-gradient(
			to right,
			#005b86,
			#1680ac 45%,
			#00476b
		);
}


/*
 * PRESSED
 */

.dpl-focus-gate-button:active
	.dpl-focus-gate-socket {
	transform: translateY(1px);

	box-shadow:
		0 0 0 1px rgba(150, 162, 167, .54),
		inset 0 1px 1px rgba(53, 65, 71, .11),
		inset 0 -1px 0 rgba(255, 255, 255, .20),
		0 1px 2px rgba(0, 0, 0, .06);
}

.dpl-focus-gate-button:active
	.dpl-focus-gate-cap {
	transform: translateY(1px);

	background:
		linear-gradient(
			to bottom,
			rgba(255, 255, 255, .18),
			rgba(255, 255, 255, 0) 34%
		),
		linear-gradient(
			to bottom,
			#e7edef 0%,
			#f3f5f6 100%
		);

	box-shadow:
		inset 0 2px 3px rgba(45, 57, 63, .12),
		inset 0 -1px 0 rgba(255, 255, 255, .10);
}

@keyframes dplFocusGateFade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


@media (prefers-reduced-motion: reduce) {
	/*
	 * Der Bestellstatus ist ein funktionaler Warnindikator und bleibt
	 * deshalb bewusst aktiv. Andere dekorative Animationen werden
	 * weiterhin reduziert.
	 */

	.dpl-domain-area:has(
		.dpl-domain-status.is-available
	)::before,
	.dpl-domain-area:has(
		.dpl-domain-status.is-available
	)::after {
		animation: none;
	}

	.dpl-expand-pocket,
	.dpl-expand-content {
		will-change: auto;
	}

	.dpl-table tbody tr.dpl-main-tr.dpl-focus-context,
	.dpl-focus-gate-button {
		transition: none;
		animation: none;
	}
}