/*
 * DOMAINS Preisliste — Live match + compact rows + pro toolbar
 *
 * Encoding: ASCII-only. Nicht durch BPM_ENCODING.
 * content: "..." nur CSS-Escapes (\00FC, \20AC).
 */

#domains-dev .dpl-root,
.dpl-root {
	width: 100%;
	box-sizing: border-box;
	margin: 0 0 20px;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
}

.dpl-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Title legacy (replaced by .dpl-portal-title in study chrome) */
.dpl-list-title {
	text-align: center;
	margin: 18px 0 10px;
	font-family: maisp1, Arial, Verdana, sans-serif;
	font-size: 28px;
	font-weight: normal;
	line-height: 1.1;
	color: #111;
	min-height: 40px;
}

.dpl-list-subslot {
	display: block;
	height: 12px;
	margin-top: 2px;
}

/* Toolbar: compact centered [ Seite | pager | pro Seite ] */
.dpl-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	min-height: 28px;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.dpl-toolbar-top {
	margin-bottom: 0;
}

/* spacing before table (study chrome may refine) */
.dpl-table-wrap {
	margin-top: 16px;
}

.dpl-toolbar-bottom {
	margin-top: 0;
}

.dpl-toolbar-left {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex: 0 0 auto;
	min-width: 0;
}

.dpl-toolbar-center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
}

.dpl-toolbar-right {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex: 0 0 auto;
}

.dpl-toolbar-right-stack {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	min-width: 0;
	position: relative;
}

.dpl-pager-wrap {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.dpl-pagejump {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11px;
	font-weight: 600;
	color: #4a545a;
	white-space: nowrap;
}

.dpl-pagejump select {
	height: 22px;
	min-width: 48px;
	padding: 0 4px;
	border: 1px solid #c5ccd0;
	border-radius: 2px;
	background: #fff;
	font-size: 11px;
	font-weight: 600;
	color: #2a3236;
	cursor: pointer;
}

/* Compact professional pager */
.dpl-pager {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
}

.dpl-pager-btn,
.dpl-pager-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	border: 1px solid #d0d5d8;
	border-radius: 2px;
	background: #f7f8f9;
	color: #245b84;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	box-sizing: border-box;
}

.dpl-pager-btn {
	min-width: 22px;
	color: #3d474d;
	font-size: 10px;
	padding: 0 4px;
}

/* active page only — cart/gold (not full pager yellow) */
.dpl-pager-num.is-active {
	border-color: #b77f00;
	background: linear-gradient(to bottom, #ffd86a 0%, #ffc21a 46%, #ee9f00 100%);
	color: #303840;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
	cursor: default;
	font-weight: 700;
	opacity: 1;
	pointer-events: none;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

/* hover = same gold look as active page */
.dpl-pager-btn:hover:not(:disabled),
.dpl-pager-num:hover:not(:disabled):not(.is-active) {
	border-color: #b77f00;
	background: linear-gradient(to bottom, #ffd86a 0%, #ffc21a 46%, #ee9f00 100%);
	color: #303840;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}

.dpl-pager-num.is-active:hover {
	border-color: #b77f00;
	background: linear-gradient(to bottom, #ffd86a 0%, #ffc21a 46%, #ee9f00 100%);
	color: #303840;
	opacity: 1;
}

.dpl-pager-btn:disabled,
.dpl-pager-num:disabled:not(.is-active) {
	opacity: 0.35;
	cursor: default;
}

/* Search field — clean full pill (equal round on all corners) */
.dpl-filter-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	max-width: 100%;
}

/* hide broken CSS-lens; browser/search UI stays clean */
.dpl-filter-ico {
	display: none !important;
}

.dpl-filter-input {
	width: 180px;
	max-width: 100%;
	height: 30px;
	padding: 0 10px;
	border: 1px solid #c1c8cc;
	/* AAM-style: all 4 corners, moderate radius (not full pill) */
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	background: linear-gradient(to bottom, #ffffff 0%, #f1f3f4 100%);
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #2a3236;
	box-sizing: border-box;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		0 1px 2px rgba(0, 0, 0, 0.06);
	outline: none;
	transition: border-color .12s ease, box-shadow .12s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.dpl-filter-input::-webkit-search-decoration,
.dpl-filter-input::-webkit-search-cancel-button,
.dpl-filter-input::-webkit-search-results-button,
.dpl-filter-input::-webkit-search-results-decoration {
	display: none;
	-webkit-appearance: none;
	appearance: none;
}

.dpl-filter-input::placeholder {
	color: #8a949a;
	opacity: 1;
}

.dpl-filter-input:hover {
	border-color: #a0aab0;
}

.dpl-filter-input:focus {
	border-color: #006699;
	box-shadow: 0 0 0 3px rgba(0, 102, 153, 0.12);
}

/* pro Seite — right aligned */
.dpl-pagesize {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	color: #4a545a;
	white-space: nowrap;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.dpl-pagesize select {
	height: 26px;
	padding: 0 6px;
	border: 1px solid #c5ccd0;
	border-radius: 3px;
	background: #fff;
	font-size: 11px;
	font-weight: 600;
	color: #2a3236;
	cursor: pointer;
}

/* loading: absolute — must NOT push table down when toggled */
.dpl-toolbar-right-stack {
	position: relative;
}

.dpl-loading {
	position: absolute;
	right: 0;
	bottom: calc(100% + 2px);
	display: block;
	text-align: right;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #006699;
	padding: 0;
	margin: 0;
	line-height: 1.2;
	min-height: 0;
	height: 12px;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.dpl-loading.is-on,
.dpl-loading[data-dpl-loading-on="1"] {
	opacity: 1;
	visibility: visible;
}

.dpl-loading[hidden] {
	/* still absolute; do not reflow toolbar */
	display: block !important;
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* smooth list swap — no height jump (min-height locked in JS) */
.dpl-table-wrap {
	margin-top: 12px;
	transition: none;
}

.dpl-root.is-loading .dpl-table tbody {
	opacity: 0.72;
	pointer-events: none;
	transition: opacity 0.14s ease;
}

/* Table fixed columns — 1px horizontal gap like Live */
.dpl-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 1px 0;
}

/* Pagination as table rows (under header / in tfoot) */
.dpl-table tr.dpl-pager-tr > td.dpl-pager-td,
.dpl-table td.dpl-pager-td {
	padding: 8px 4px 10px !important;
	vertical-align: middle;
	background: transparent !important;
	border: 0 !important;
	height: auto !important;
	overflow: visible !important;
	text-align: center;
}

/* more air under top pagination before first domain row */
.dpl-table thead tr.dpl-pager-tr-top > td.dpl-pager-td {
	padding-top: 6px !important;
	padding-bottom: 16px !important;
	border-bottom: 0 !important;
}

.dpl-table thead tr.dpl-th-gap-tr > td.dpl-th-gap {
	height: 6px !important;
}

.dpl-table tfoot tr.dpl-pager-tr-bottom > td.dpl-pager-td {
	padding-top: 14px !important;
	padding-bottom: 6px !important;
}

/* toolbar inside table cell: compact cluster, centered */
.dpl-table .dpl-pager-td .dpl-toolbar {
	margin: 0 auto;
	width: auto;
	max-width: 100%;
}

.dpl-table .dpl-pager-td .dpl-toolbar-top,
.dpl-table .dpl-pager-td .dpl-toolbar-bottom {
	margin: 0 auto;
	padding: 0;
}


.dpl-table thead tr.dpl-head-tr > td.dpl-th {
	border-bottom: 0 !important;
}

.dpl-table td {
	padding: 0;
	margin: 0;
}

/* main row cells: keep 1px visual gap via border-spacing */
.dpl-table tbody tr.dpl-main-tr > td {
	box-sizing: border-box;
}

/* Table headers — base; study chrome refines sort pills / labels */
.dpl-th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px !important;
	font-weight: normal;
	text-align: center;
	padding: 8px 4px !important;
	vertical-align: middle;
	color: #343d42;
	line-height: 1;
	border-bottom: 0 !important;
	letter-spacing: 0.02em;
	overflow: visible;
}

.dpl-th-info {
	letter-spacing: 0.04em;
}

.dpl-th-clock {
	/* clock size controlled by .dpl-interval-head .dpl-clock (30px) */
	line-height: 1;
	color: #2a3236;
	overflow: visible;
}

/* only tiny air before first row — no visible hr line */
.dpl-th-gap {
	height: 2px !important;
	padding: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* Sort / static header stack — same height so INFO + clock sit on one line with DOMAIN/PREIS */
.dpl-sort-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	min-height: 42px;
	line-height: 1;
}

.dpl-sort-block-static {
	pointer-events: none;
}

.dpl-sort-label {
	font-family: maisp1, Arial, Verdana, sans-serif;
	font-size: 20px;
	font-weight: normal;
	line-height: 1;
	white-space: nowrap;
	color: #1a2226;
}

.dpl-sort-label-clock {
	font-size: 30px;
	line-height: 1;
	/* sit on same visual baseline as DOMAIN / PREIS labels */
	position: relative;
	top: 4px;
}

/* reserves same vertical space as original offset_*.gif row */
.dpl-sort-icons {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	gap: 2px;
	min-height: 18px;
	margin-top: 1px;
	line-height: 0;
}

.dpl-sort-icons-spacer {
	visibility: hidden;
	width: 36px;
	min-height: 18px;
}

.dpl-sort-ico {
	display: inline-block;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 0;
	vertical-align: top;
}

.dpl-sort-ico img {
	display: block;
	border: 0;
	margin: 4px 0 0;
	vertical-align: top;
}

.dpl-sort-block.is-active .dpl-sort-label {
	color: #003456;
}

/*
 * INDEX-KOMMANDO
 *
 * Maximal 5 sichtbare Indexkuerzel.
 * Weitere Indizes erscheinen nur als +N.
 *
 * Der komplette Block ist ein eigener Info-Trigger.
 * Er oeffnet die Index-Infoblase und NICHT die DOMAIN-Workstation.
 */
.dpl-legend-cell {
	padding-left: 2px !important;
	padding-right: 2px !important;
	overflow: hidden !important;
	vertical-align: middle !important;
}

.dpl-idx-summary {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;

	max-width: 100%;
	height: 18px;
	box-sizing: border-box;

	margin: 0;
	padding: 0 2px;

	border: 0;
	border-radius: 3px;
	background: transparent;

	color: #006699;

	font: 600 9px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0;

	white-space: nowrap;
	overflow: hidden;

	cursor: pointer;

	box-shadow: none;

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

.dpl-idx-summary-code,
.dpl-idx-summary-rest {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;

	margin-right: 4px;

	color: #006699;

	font-size: 9px;
	font-weight: 600;
	line-height: 1;

	text-decoration: underline;
}

.dpl-idx-summary-code:last-child,
.dpl-idx-summary-rest:last-child {
	margin-right: 0;
}

.dpl-idx-summary-rest {
	font-weight: 700;
	text-decoration: none;
}

.dpl-idx-summary:hover,
.dpl-idx-summary:focus-visible {
	background: #e8f3f9;
	color: #006699;

	outline: 0;

	box-shadow:
		0 0 0 1px rgba(0, 102, 153, .18);
}

.dpl-idx-summary:hover .dpl-idx-summary-code,
.dpl-idx-summary:hover .dpl-idx-summary-rest,
.dpl-idx-summary:focus-visible .dpl-idx-summary-code,
.dpl-idx-summary:focus-visible .dpl-idx-summary-rest {
	color: #006699;
	text-decoration: none;
}

.dpl-idx-summary:active {
	background: #bb0000;
	color: #ffffff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .18),
		inset 0 -1px 0 rgba(0, 0, 0, .15);
}

.dpl-idx-summary:active .dpl-idx-summary-code,
.dpl-idx-summary:active .dpl-idx-summary-rest {
	color: #ffffff;
}


/* INDEX-INFOKARTE · restaurierte Detailhinweise
 * Offen: ueber Filterkopf (200) und Such-/Availability-Karten (175/155/140).
 * Expand-Workstation bleibt hoeher und unangetastet.
 */
.dpl-legend-cell.is-index-open {
	position: relative;
	z-index: 420;
	overflow: visible !important;
}

.dpl-table tbody tr.dpl-main-tr:has(> .dpl-legend-cell.is-index-open) {
	position: relative;
	z-index: 420;
}

.dpl-idx-group {
	position: relative;
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	vertical-align: middle;
}

.dpl-idx-group.is-open {
	z-index: 421;
}

.dpl-idx-summary[aria-expanded="true"] {
	background: #006699;
	color: #ffffff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .18),
		inset 0 -1px 0 rgba(0, 0, 0, .15);
}

.dpl-idx-summary[aria-expanded="true"] .dpl-idx-summary-code,
.dpl-idx-summary[aria-expanded="true"] .dpl-idx-summary-rest {
	color: #ffffff;
	text-decoration: none;
}

.dpl-idx-card {
	position: absolute;
	left: 0;
	bottom: calc(100% + 8px);
	z-index: 430;

	width: max-content;
	max-width: calc(100vw - 24px);
	box-sizing: border-box;

	padding: 0;

	border: 1px solid #8a949a;
	border-radius: 4px;

	background: #fffef9;
	color: #1a2226;
	text-align: left;

	box-shadow:
		0 8px 22px rgba(0, 0, 0, .22),
		0 2px 6px rgba(0, 0, 0, .08),
		inset 0 1px 0 rgba(255, 255, 255, .95);

	cursor: default;
	pointer-events: auto;
}

.dpl-idx-card[hidden] {
	display: none !important;
}

.dpl-idx-card-head {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;

	padding: 8px 8px 7px 12px;

	border-bottom: 1px solid #e0e4e7;
	border-radius: 4px 4px 0 0;

	background:
		linear-gradient(
			to bottom,
			#f7f9fa 0%,
			#eef1f3 100%
		);
}

.dpl-idx-card-head-copy {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	padding-top: 1px;
}

.dpl-idx-card-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	width: 19px;
	height: 19px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;

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

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

	font: 400 15px/17px Arial, Helvetica, sans-serif;
	cursor: pointer;

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

.dpl-idx-card-close:hover {
	border-color: #a76b6b;
	background:
		linear-gradient(to bottom, #ffffff 0%, #f5e9e9 100%);
	color: #bb0000;
	cursor: pointer;
}

.dpl-idx-card-close:active {
	border-color: #8c0000;
	background: #eadada;
	color: #990000;
	cursor: pointer;
}

.dpl-idx-card-tld {
	color: #003456;
	font: 800 13px/1.15 Arial, Helvetica, sans-serif;
	letter-spacing: .02em;
}

.dpl-idx-card-sub {
	color: #6a747a;
	font: 600 9px/1.2 Arial, Helvetica, sans-serif;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.dpl-idx-card-list {
	list-style: none;
	margin: 0;
	padding: 6px 12px 10px;
	width: max-content;
	max-width: 100%;
	max-height: min(60vh, 320px);
	overflow: auto;
	box-sizing: border-box;
}

.dpl-idx-card-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;

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

	padding: 5px 0;
	border-bottom: 1px dotted #d8dee2;
}

.dpl-idx-card-list li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.dpl-idx-card-code {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;

	min-width: 2.75em;
	height: auto;
	min-height: 16px;
	box-sizing: border-box;
	padding: 2px 6px;

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

	background: #ffffff;
	color: #006699;
	font: 800 10px/1.2 Arial, Helvetica, sans-serif;
	white-space: nowrap;
}

.dpl-idx-card-text {
	flex: 0 1 auto;
	width: max-content;
	max-width: 100%;
	min-width: 0;

	color: #2a3236;
	font: 400 12px/1.4 Arial, Helvetica, sans-serif;
	overflow-wrap: break-word;
}

.dpl-idx-card::after {
	content: "";
	position: absolute;
	left: 16px;
	top: 100%;

	border: 6px solid transparent;
	border-top-color: #fffef9;
}

.dpl-idx-card::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 100%;

	border: 7px solid transparent;
	border-top-color: #8a949a;
}

/* Compact main row (slightly lower than 32px; special/trustee subrows unchanged) */
.dpl-table tbody tr.dpl-main-tr > td {
	height: 26px;
	line-height: 1.1;
	overflow: hidden;
}

/* Whole row clickable → expand */
.dpl-table tbody tr.dpl-main-tr {
	cursor: pointer;
}

/*
 * DOMAINBLOCK · DEZENTER HOVER
 *
 * Hauptzeile + optionale Sonderpreis-/Trustee-Zeilen
 * reagieren optisch als eine gemeinsame Domain.
 *
 * Die Farbe liegt bewusst nur als sehr heller
 * Untergrund unter den bestehenden Zellfarben.
 * Blaue Intervallfelder, Preisflächen, Trustee-Siegel
 * und Warenkorb bleiben dadurch unverändert.
 */

.dpl-table tbody tr.dpl-main-tr,
.dpl-table tbody tr.dpl-follow-tr,
.dpl-table tbody tr.dpl-trustee-tr {
	transition:
		background-color .12s ease;
}


/*
 * HAUPTZEILE aktiv bei:
 *
 * - Hover auf Hauptzeile
 * - Hover auf Sonderpreis
 * - Hover auf Trustee
 */
.dpl-table tbody tr.dpl-main-tr:hover,
.dpl-table tbody tr.dpl-main-tr:has(
	+ tr.dpl-follow-tr:hover
),
.dpl-table tbody tr.dpl-main-tr:has(
	+ tr.dpl-trustee-tr:hover
),
.dpl-table tbody tr.dpl-main-tr:has(
	+ tr.dpl-follow-tr
	+ tr.dpl-trustee-tr:hover
) {
	background-color: #f4f8f5 !important;
}


/*
 * SONDERPREISZEILE aktiv bei:
 *
 * - eigenem Hover
 * - Hover auf Hauptzeile
 * - Hover auf folgendem Trustee
 */
.dpl-table tbody tr.dpl-follow-tr:hover,
.dpl-table tbody tr.dpl-main-tr:hover
	+ tr.dpl-follow-tr,
.dpl-table tbody tr.dpl-follow-tr:has(
	+ tr.dpl-trustee-tr:hover
) {
	background-color: #f4f8f5 !important;
}


/*
 * TRUSTEE-ZEILE aktiv bei:
 *
 * - eigenem Hover
 * - Hover auf Hauptzeile
 * - Hover auf Sonderpreiszeile
 */
.dpl-table tbody tr.dpl-trustee-tr:hover,
.dpl-table tbody tr.dpl-main-tr:hover
	+ tr.dpl-trustee-tr,
.dpl-table tbody tr.dpl-main-tr:hover
	+ tr.dpl-follow-tr
	+ tr.dpl-trustee-tr,
.dpl-table tbody tr.dpl-follow-tr:hover
	+ tr.dpl-trustee-tr {
	background-color: #f4f8f5 !important;
}

/*
 * INTERVALL · HOVER-AKZENT
 *
 * Der Domainblock bleibt sehr hellgrün.
 * Nur das Intervall wechselt als klarer
 * technischer Hover-Indikator von Blau auf Rot.
 */
.dpl-table td.domain_int {
	transition:
		background-color .12s ease,
		color .12s ease;
}

.dpl-table tbody tr.dpl-main-tr:hover
	> td.domain_int,
.dpl-table tbody tr.dpl-main-tr:has(
	+ tr.dpl-follow-tr:hover
)
	> td.domain_int,
.dpl-table tbody tr.dpl-main-tr:has(
	+ tr.dpl-trustee-tr:hover
)
	> td.domain_int,
.dpl-table tbody tr.dpl-main-tr:has(
	+ tr.dpl-follow-tr
	+ tr.dpl-trustee-tr:hover
)
	> td.domain_int {
	background-color: #bb0000 !important;
	color: #ffffff !important;
}

/* TLD: no vertical dotted line; right-aligned + small right margin */
.dpl-table .dpl-td-tld,
.dpl-table td.domain_tld {
	border: 0 !important;
	border-right: 0 !important;
	background: transparent !important;
	text-align: right !important;
	vertical-align: middle;
	padding-right: 3px !important;
}

/*
 * No 1px gap between flag + info (border-spacing cancel)
 * so INFO header sits truly centered over flag+info block
 */
.dpl-table td.domain_icon {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-right: 0 !important;
	border-right: 0 !important;
	position: relative;
	z-index: 1;
}

.dpl-table td.domain_info {
	padding-left: 2px !important;
	border-left: 0 !important;
	position: relative;
	z-index: 0;
}

/*
 * Nur die beiden Übergänge
 *
 * Indizes -> Flag
 * Flag    -> Info
 *
 * optisch schließen.
 *
 * Das globale 1px-Tabellenraster bleibt für alle
 * anderen Spalten vollständig erhalten.
 */
.dpl-table td.domain_icon {
	overflow: visible !important;
}

.dpl-table td.domain_icon::before,
.dpl-table td.domain_icon::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 1px;
	background: inherit;
	pointer-events: none;
}

.dpl-table td.domain_icon::before {
	left: -1px;
}

.dpl-table td.domain_icon::after {
	right: -1px;
}

/* interval column tighter */
.dpl-table td.domain_int {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.dpl-table .domain_tld table {
	border: 0 !important;
	border-right: 0 !important;
	height: auto !important;
	width: 100%;
}

.dpl-tld-a,
.dpl-tld-a:link,
.dpl-tld-a:visited {
	display: inline-block;
	font-family: Arial, Verdana, sans-serif !important;
	font-size: 16px !important;
	font-weight: bold !important;
	color: #000 !important;
	text-decoration: underline !important;
	line-height: 1.15;
	text-align: right;
	margin-right: 2px;
}

.dpl-tld-a:hover {
	text-decoration: none !important;
}

/* PREIS + SETUP: right-aligned, 2–3px padding from right edge */
.dpl-table td.domain_price,
.dpl-table td.domain_setup,
.dpl-table td.domain_pricetrustee,
.dpl-table td.domain_priceafter {
	text-align: right !important;
	padding-right: 3px !important;
}

.dpl-table td.domain_price table,
.dpl-table td.domain_setup table {
	width: 100%;
}

.dpl-table td.domain_price table td,
.dpl-table td.domain_setup table td {
	text-align: right !important;
	padding-right: 0 !important;
}

/* Flag native size */
.dpl-table .domain_icon {
	cursor: pointer;
}

.dpl-table .domain_icon img {
	display: inline-block;
	width: auto !important;
	height: auto !important;
	max-width: 24px;
	max-height: 16px;
	border: 0;
	vertical-align: middle;
	cursor: default;
}

.dpl-table .domain_legend {
	font-size: 10px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: visible;
}

.dpl-table .domain_info {
	font-size: 11px;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dpl-table .domain_int {
	font-size: 11px;
	white-space: nowrap;
	background-color: #006699;
	color: #fff;
}

.dpl-table .domain_price table td {
	font-size: 20px !important;
	line-height: 1;
	white-space: nowrap;
}

.dpl-table .domain_setup table td {
	font-size: 11px;
	white-space: nowrap;
}

/* Live ispbuygo cart button */
.dpl-td-buy {
	text-align: center;
	padding-left: 2px !important;
}

.dpl-ispbuy {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	max-width: 40px !important;
	height: 40px !important;
	box-sizing: border-box;
	padding: 0 !important;
	border: 1px solid transparent !important;
	border-radius: 8px !important;
	background: transparent !important;
	font: 400 20px/1 "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", Arial, Helvetica, sans-serif !important;
	box-shadow: none !important;
	cursor: pointer;
	overflow: hidden;
	outline: none !important;
	vertical-align: middle;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
	transition: transform .11s, box-shadow .11s, background .11s, border-color .11s;
	transform: translateY(0);
}

.dpl-ispbuy-emoji {
	display: block;
	line-height: 1;
}

.dpl-ispbuy-svg {
	display: none;
}

.dpl-ispbuy-svg svg {
	display: block;
	filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .35));
}

.dpl-ispbuy:hover {
	background: linear-gradient(to bottom, #ffd86a 0%, #ffc21a 46%, #ee9f00 100%) !important;
	border-color: #b77f00 !important;
	transform: translateY(1px);
	box-shadow:
		inset 0 2px 5px rgba(120, 70, 0, .28),
		inset 0 1px 0 rgba(255, 255, 255, .62),
		inset 0 -1px 0 rgba(0, 0, 0, .22),
		0 1px 2px rgba(0, 0, 0, .24) !important;
}

.dpl-ispbuy:hover .dpl-ispbuy-emoji {
	display: none;
}

.dpl-ispbuy:hover .dpl-ispbuy-svg {
	display: block;
}

.dpl-ispbuy:active {
	transform: translateY(2px);
	background: linear-gradient(to bottom, #e7a000 0%, #ffc21a 52%, #d88b00 100%) !important;
	border-color: #8c5f00 !important;
}

/*
 * Normal rows: only 1px vertical gap (tight stack).
 * Special/Trustee subrows: more air; larger spacer after the whole block.
 */
.dpl-table tr.dpl-follow-tr > td,
.dpl-table tr.dpl-trustee-tr > td {
	height: auto !important;
	padding-top: 6px !important;
	padding-bottom: 6px !important;
	vertical-align: middle !important;
}

.dpl-subrow-label {
	text-align: left !important;
	height: auto !important;
	line-height: 1.35 !important;
	font-size: 12px !important;
	padding-left: 8px !important;
	padding-right: 6px !important;
}

.dpl-table .domain_trustee {
	height: auto !important;
	min-height: 26px;
	font-size: 12px !important;
}

.dpl-table .domain_hitdate {
	height: auto !important;
	padding-top: 6px !important;
	font-size: 11px;
}

.dpl-table .domain_pricetrustee {
	font-size: 18px;
	padding-top: 2px !important;
	padding-bottom: 2px !important;
}

.dpl-table .domain_priceafter {
	font-size: 18px;
}

.dpl-table .domain_intfollow {
	font-size: 10px;
}

/* default / normal rows: 1px only */
.dpl-row-spacer > td,
.dpl-row-spacer-tight > td {
	height: 1px !important;
	line-height: 1px !important;
	font-size: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}

/* after trustee or special block: larger breathing room */
.dpl-row-spacer-block > td {
	height: 12px !important;
	line-height: 12px !important;
	font-size: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}


/*
 * TLD-GRUPPIERUNG
 *
 * Standard:
 * 35px vor + 35px nach jeder Gruppe.
 *
 * Beginnt die aktuelle Seite unmittelbar mit einer
 * Gruppe, wird der obere Abstand auf 20px reduziert.
 *
 * Diese Werte bleiben bewusst zentral ueber die
 * CSS-Variablen einstellbar.
 */
.dpl-group-gap-before > td,
.dpl-row-spacer.dpl-group-gap-after > td {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	font-size: 0 !important;
}

.dpl-group-gap-before > td {
	height: var(--dpl-group-gap) !important;
	line-height: var(--dpl-group-gap) !important;
}

.dpl-group-gap-before.is-first > td {
	height: var(--dpl-group-gap-first) !important;
	line-height: var(--dpl-group-gap-first) !important;
}


/*
 * ================================================================
 * TLD-GRUPPENMARKIERUNG · DESIGNSTUFE 2
 * ================================================================
 *
 * Ziel:
 *
 * - sehr helle "Spachtel"-Flaeche unter der Gruppe
 * - Fade nach rechts
 * - ca. 8px Ueberstand oben und unten
 * - feine dunkle Klammer links
 * - Gruppenname normal lesbar: DE / US / IT / EU
 * - kleiner roter Zahlenbadge
 *
 * Die eigentlichen Tabellenzellen bleiben unveraendert.
 */

.dpl-root {
	/*
	 * Position der linken Klammer innerhalb der
	 * bestehenden TLD-Spalte.
	 */
	/*
	 * Klammer liegt exakt auf der linken Kante
	 * der Gruppen-Spachtel.
	 */
	--dpl-group-bracket-x: 0px;

	/* Klammer */
	--dpl-group-bracket-color: #303437;
	--dpl-group-bracket-cap: 15px;

	/* Underlay */
	--dpl-group-underlay-overhang: 8px;
	--dpl-group-underlay-start: rgba(239, 241, 242, .64);
	--dpl-group-underlay-mid: rgba(246, 247, 248, .40);
	--dpl-group-underlay-soft: rgba(250, 250, 250, .16);
	--dpl-group-underlay-end: rgba(255, 255, 255, 0);
}


/*
 * Eigentliche Spachtel.
 *
 * Jede Gruppenzeile bekommt exakt denselben horizontalen
 * Verlauf. Dadurch entsteht optisch eine durchgehende
 * Flaeche, ohne die Tabellenzellen umzubauen.
 */
.dpl-table tbody tr.dpl-group-row {
	background:
		linear-gradient(
			to right,
			var(--dpl-group-underlay-start) 0%,
			var(--dpl-group-underlay-start) 18%,
			var(--dpl-group-underlay-mid) 42%,
			var(--dpl-group-underlay-soft) 61%,
			var(--dpl-group-underlay-end) 76%
		);
}


/*
 * Die 35px-/20px-Abstandszeile VOR der Gruppe bleibt
 * grundsaetzlich leer.
 *
 * Nur ihre letzten 8px bilden den oberen Ueberstand
 * der Spachtel.
 */
.dpl-group-gap-before > td {
	position: relative;
	overflow: visible !important;

	background:
		linear-gradient(
			to right,
			var(--dpl-group-underlay-start) 0%,
			var(--dpl-group-underlay-start) 18%,
			var(--dpl-group-underlay-mid) 42%,
			var(--dpl-group-underlay-soft) 61%,
			var(--dpl-group-underlay-end) 76%
		)
		left bottom / 100% var(--dpl-group-underlay-overhang)
		no-repeat !important;
}


/*
 * Dasselbe NACH der Gruppe:
 * nur die ersten 8px des 35px-Abstands werden unterlegt.
 */
.dpl-row-spacer.dpl-group-gap-after > td {
	position: relative;
	overflow: visible !important;

	background:
		linear-gradient(
			to right,
			var(--dpl-group-underlay-start) 0%,
			var(--dpl-group-underlay-start) 18%,
			var(--dpl-group-underlay-mid) 42%,
			var(--dpl-group-underlay-soft) 61%,
			var(--dpl-group-underlay-end) 76%
		)
		left top / 100% var(--dpl-group-underlay-overhang)
		no-repeat !important;
}


/*
 * Gruppenmarker darf links aus der eigentlichen
 * Preistabelle herausragen.
 *
 * Die Tabelle selbst behaelt ihre Breite.
 */
.dpl-table-wrap,
.dpl-table,
.dpl-table tbody,
.dpl-table tbody tr.dpl-group-row,
.dpl-table tbody tr.dpl-group-row > td:first-child {
	overflow: visible !important;
}

.dpl-table tbody tr.dpl-group-row > td:first-child {
	position: relative;
}

.dpl-table tbody tr.dpl-group-row > td:first-child::before {
	content: "";
	position: absolute;
	z-index: 4;

	left: var(--dpl-group-bracket-x);
	top: -1px;
	bottom: -1px;

	width: 0;
	border-left:
		1px solid
		var(--dpl-group-bracket-color);

	pointer-events: none;
}


/*
 * Oberes Klammerende liegt im 8px-Underlay-Ueberstand.
 */
.dpl-group-gap-before > td::before {
	content: "";
	position: absolute;
	z-index: 4;

	left: var(--dpl-group-bracket-x);
	bottom: 0;

	width: var(--dpl-group-bracket-cap);
	height: var(--dpl-group-underlay-overhang);

	box-sizing: border-box;

	border-left:
		1px solid
		var(--dpl-group-bracket-color);

	border-top:
		1px solid
		var(--dpl-group-bracket-color);

	pointer-events: none;
}


/*
 * Unteres Klammerende.
 */
.dpl-row-spacer.dpl-group-gap-after > td::before {
	content: "";
	position: absolute;
	z-index: 4;

	left: var(--dpl-group-bracket-x);
	top: 0;

	width: var(--dpl-group-bracket-cap);
	height: var(--dpl-group-underlay-overhang);

	box-sizing: border-box;

	border-left:
		1px solid
		var(--dpl-group-bracket-color);

	border-bottom:
		1px solid
		var(--dpl-group-bracket-color);

	pointer-events: none;
}


/*
 * Gruppenkennung:
 *
 * DE
 *   4
 *
 * Keine Pille und keine Rotation.
 *
 * Der weisse Hintergrund unterbricht nur die Haarlinie,
 * damit der Text sauber lesbar bleibt.
 */
.dpl-group-rail-marker {
	position: absolute;
	z-index: 8;

	/*
	 * Der Mittelpunkt von DE / US / EU liegt exakt
	 * auf der senkrechten Klammerlinie.
	 */
	left: var(--dpl-group-bracket-x);

	/*
	 * Feste Lage innerhalb jeder Gruppe:
	 * 50px unterhalb der oberen Gruppenkante.
	 */
	top: 50px;

	display: inline-block;
	width: auto;
	height: auto;

	/*
	 * Der weisse Hintergrund unterbricht die Haarlinie
	 * nur unmittelbar hinter der Beschriftung.
	 */
	padding: 2px 4px;

	background: #fff;
	color: #111;

	font: 500 11px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .01em;
	white-space: nowrap;

	/*
	 * Horizontal exakt mittig auf der Klammerlinie.
	 */
	transform: translate(-50%, -50%);

	pointer-events: none;
}


/*
 * DE / US / IT / EU
 */
.dpl-group-rail-name {
	display: block;
	position: static;

	margin: 0;
	padding: 0;

	border: 0;
	border-radius: 0;

	background: transparent;
	color: inherit;

	font: inherit;
	letter-spacing: inherit;

	transform: none;
	box-shadow: none;
}


/*
 * Kleiner roter Zaehler wie eine Notification-Blase.
 * Sitzt leicht rechts/oben am Gruppennamen.
 */
.dpl-group-rail-count {
	position: absolute;
	z-index: 2;

	right: -10px;
	top: -7px;
	left: auto;

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

	min-width: 13px;
	height: 13px;
	box-sizing: border-box;
	padding: 0 3px;

	border: 1px solid #990000;
	border-radius: 7px;

	background: #bb0000;
	color: #fff;

	font: 700 8px/11px Arial, Helvetica, sans-serif;
	letter-spacing: 0;

	transform: none;

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

.dpl-row-spacer.dpl-group-gap-after > td {
	height: var(--dpl-group-gap) !important;
	line-height: var(--dpl-group-gap) !important;
}

/* clear visual break: priority matches → normal search results */

/* clear visual break: priority matches → normal search results */
.dpl-search-priority-gap > td {
	height: 30px !important;
	line-height: 30px !important;
	font-size: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
}


/*
 * LETZTE AENDERUNG
 *
 * Erste Zeitmarke:
 *
 *     2026-08-14 00:53 Uhr
 *        LETZTE AENDERUNG
 *
 * Weitere Zeitbloecke:
 *
 *     2026-08-12 18:21 Uhr
 */
.dpl-changes-marker > td {
	height: auto !important;
	padding: 17px 0 7px !important;
	border: 0 !important;
	background: transparent !important;
	text-align: center !important;
}

.dpl-changes-marker.is-first > td {
	padding-top: 11px !important;
	padding-bottom: 9px !important;
}

.dpl-changes-marker-inner {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 158px;
	padding: 0 18px;
	box-sizing: border-box;
}

/* kleine seitliche Trennlinien */
.dpl-changes-marker-inner::before,
.dpl-changes-marker-inner::after {
	content: "";
	position: absolute;
	top: 5px;
	width: 34px;
	height: 1px;
	background: #d8dddf;
}

.dpl-changes-marker-inner::before {
	right: 100%;
}

.dpl-changes-marker-inner::after {
	left: 100%;
}

/* Zeitstempel */
.dpl-changes-marker time {
	display: block;
	margin: 0;
	padding: 0;
	color: #000;
	font: 400 8px/1.15 Arial, Helvetica, sans-serif;
	letter-spacing: .055em;
	white-space: nowrap;
}

/* nur beim allerersten Block vorhanden */
.dpl-changes-marker strong {
	display: block;
	margin-top: 4px;
	padding: 0;
	color: #475359;
	font: 600 10px/1.05 Arial, Helvetica, sans-serif;
	letter-spacing: .07em;
	white-space: nowrap;
}

/* no extra bottom border on last main-row cell looking like hr */
.dpl-table thead tr td {
	border-bottom: 0 !important;
}

.dpl-empty {
	padding: 16px;
	text-align: center;
	font-size: 12px;
	color: #666;
}

.dpl-legend {
	margin-top: 16px;
}

.dpl-special-note {
	font-size: 11px;
}

/* Trustee line + filter badge (row subline — not study head chips) */
.dpl-trustee-line {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	min-width: 0;
}

/*
 * Der kollabierte Trustee-Badge darf beim Hover
 * über seine reservierten 22px hinausfahren.
 */
.dpl-table .domain_trustee,
.dpl-trustee-line {
	overflow: visible !important;
}

.dpl-trustee-name {
	font-size: 11px !important;
	font-weight: 400;
	line-height: 1.25 !important;
	color: #2a3236;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
	flex: 0 1 auto;
}

/*
 * TRUSTEE SERVICE · Mini-Siegel 06A
 *
 * Small-size first:
 * Das T bleibt bewusst vollkommen unverziert und muss
 * auch bei Tabellenmassstab sofort lesbar bleiben.
 */
/*
 * TRUSTEE FILTER · kollabiertes Mini-Siegel
 *
 * Im Ruhezustand belegt das Bedienelement nur die
 * Breite des Siegels. Der eigentliche Badge fährt
 * als Overlay nach rechts aus und verändert dadurch
 * weder Spaltenbreite noch Tabellenlayout.
 */
.dpl-trustee-badge {
	position: relative;
	z-index: 12;

	display: inline-block;
	flex: 0 0 22px;

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

	margin-left: 2px;
	padding: 0;

	border: 0;
	background: transparent;

	color: #781712;

	cursor: pointer;
	white-space: nowrap;
	overflow: visible;

	outline: 0;

	transition:
		transform .10s ease,
		filter .16s ease;
}

.dpl-trustee-badge:hover,
.dpl-trustee-badge:focus,
.dpl-trustee-badge:focus-visible {
	z-index: 40;
}


/*
 * Wachssiegel.
 *
 * Die Kontur darf edel/physisch wirken.
 * Das T darin bleibt dagegen komplett schlicht.
 */
.dpl-trustee-seal {
	position: absolute;
	z-index: 2;

	left: 0;
	top: 0;

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

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

	transform: none;

	clip-path: polygon(
		50% 0%,
		62% 5%,
		74% 3%,
		82% 13%,
		94% 18%,
		95% 31%,
		100% 42%,
		95% 54%,
		98% 67%,
		88% 76%,
		84% 89%,
		71% 91%,
		61% 99%,
		49% 95%,
		37% 100%,
		27% 92%,
		14% 90%,
		11% 77%,
		1% 68%,
		5% 55%,
		0% 44%,
		5% 32%,
		4% 19%,
		17% 14%,
		24% 4%,
		38% 6%
	);

	background:
		radial-gradient(
			circle at 37% 28%,
			#d45b4f 0%,
			#b51e18 27%,
			#8f0807 61%,
			#650000 100%
		);

	box-shadow:
		inset 0 1px 1px rgba(255, 255, 255, .35),
		inset 0 -2px 2px rgba(54, 0, 0, .32),
		0 1px 2px rgba(0, 0, 0, .20);

	pointer-events: none;
}


/*
 * Das T selbst:
 * KEINE Kontur, KEIN Ornament, KEIN Text-Shadow.
 */
.dpl-trustee-seal-t {
	display: block;

	color: #fffaf2;

	font-family: Georgia, "Times New Roman", serif;
	font-size: 13px;
	font-weight: 400;
	line-height: 1;

	text-align: center;

	text-shadow: none;
}


/*
 * Ausfahrender Trustee-Service-Badge.
 *
 * Liegt hinter dem Siegel und wächst ausschließlich
 * nach rechts. Im Ruhezustand vollständig verborgen.
 */
.dpl-trustee-badge-label {
	position: absolute;
	z-index: 1;

	left: 11px;
	top: 1px;

	display: flex;
	align-items: center;

	width: 0;
	height: 20px;
	box-sizing: border-box;

	padding: 0;

	border: 1px solid transparent;
	border-radius: 0 5px 5px 0;

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

	color: #781712;

	font: 600 8px/18px Arial, Helvetica, sans-serif;
	letter-spacing: .065em;
	text-transform: uppercase;

	white-space: nowrap;
	overflow: hidden;
	opacity: 0;

	box-shadow: none;

	transition:
		width .20s ease,
		padding .20s ease,
		opacity .12s ease,
		border-color .16s ease,
		box-shadow .16s ease;
}


/*
 * Feine Trennung zwischen Siegel und Text.
 */
.dpl-trustee-badge-label::before {
	content: "";

	flex: 0 0 auto;

	width: 1px;
	height: 10px;

	margin-right: 6px;

	background: rgba(125, 25, 20, .38);
}


/*
 * Hover/Fokus:
 * Siegel bleibt an Ort und Stelle.
 * Nur die helle Beschriftungsfahne fährt nach rechts.
 */
.dpl-trustee-badge:hover .dpl-trustee-badge-label,
.dpl-trustee-badge:focus .dpl-trustee-badge-label,
.dpl-trustee-badge:focus-visible .dpl-trustee-badge-label {
	width: 109px;
	padding: 0 11px 0 14px;

	border-color: #8f2520;

	opacity: 1;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .98),
		0 1px 3px rgba(80, 0, 0, .14);
}


/*
 * Siegel selbst reagiert nur minimal.
 */
.dpl-trustee-badge:hover .dpl-trustee-seal,
.dpl-trustee-badge:focus .dpl-trustee-seal,
.dpl-trustee-badge:focus-visible .dpl-trustee-seal {
	filter: brightness(1.06);
}


/*
 * Klickfeedback ohne Layoutbewegung.
 */
.dpl-trustee-badge:active {
	transform: translateY(1px);
}

/* Active filter chips: styles live in domains-study-chrome.css (.dpl-chip yellow) */

/* DOMAINS Preisliste - study chrome (title, intro, filter, thead sort/group)
 * Scoped under #domains-dev / .dpl-root. Does NOT restyle table body rows.
 */

#domains-dev .dpl-root,
.dpl-root {
	--dpl-blue: #006699;
	--dpl-blue-soft: #eaf4f9;
	--dpl-blue-border: #9fc6d9;
	--dpl-yellow: #ffc21a;
	--dpl-yellow-hi: #ffe477;
	--dpl-yellow-lo: #eaa000;
	--dpl-yellow-border: #c88c00;
	--dpl-ink: #20272b;
	--dpl-muted: #7b868c;
	--dpl-line: #e3e7e9;
	--dpl-line2: #f1f3f4;

	/* TLD-Gruppierung */
	--dpl-group-gap: 35px;
	--dpl-group-gap-first: 20px;
}

/* ----- Title (maisp1 like live preisliste; more air above) ----- */
.dpl-portal-title {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	/* more space above DOMAINENDUNGEN */
	margin: -5px 0 36px; 
	padding-top: 6px;
	color: #111;
}

.dpl-portal-title-main {
	display: inline-flex;
	align-items: center;
	gap: 9px;

	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;
	font-stretch: condensed;
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -1px;
	line-height: 1;
}
h2.dpl-portal-title-main {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.dpl-portal-ext {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin: 0 0 1px;
	color: #6a767d;
	opacity: 0.72;
	text-decoration: none;
	line-height: 0;
	transition: color 0.12s ease, opacity 0.12s ease;
}

.dpl-portal-ext-icon {
	display: block;
	width: 13px;
	height: 13px;
	fill: currentColor;
}

.dpl-portal-ext:hover,
.dpl-portal-ext:focus {
	color: #006699;
	opacity: 1;
}

.dpl-portal-ext:active {
	color: #004d73;
	opacity: 1;
}

/* ----- Intro ----- */
.dpl-portal-intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0 0 13px;
	padding: 9px 0 10px;
}

.dpl-portal-intro-col {
	min-width: 0;
	padding: 0 14px 0 4px;
}

.dpl-portal-intro-col + .dpl-portal-intro-col {
	border-left: 1px solid #e7eaec;
	padding: 0 4px 0 15px;
}

.dpl-portal-intro-title {
	margin: 0 0 4px;
	color: #344047;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.055em;
	text-transform: uppercase;
}
h3.dpl-portal-intro-title {
	margin: 0 0 4px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.055em;
	text-transform: uppercase;
	color: #344047;
}

h3.dpl-portal-intro-title.dpl-ws-version {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.055em;
	text-transform: none;
	color: #344047;
}

.dpl-ws-version-hit {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: left;
}

.dpl-ws-version-label {
	line-height: 1.15;
}

.dpl-ws-version-info {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 12px;
	width: 12px;
	height: 12px;
	margin: 0;
	padding: 0;
	border: 1px solid #004d73;
	border-radius: 1px;
	background: #006699;
	color: #fff;
	font: 700 9px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
	cursor: pointer;
}

.dpl-ws-version-info:hover,
.dpl-ws-version-info:focus {
	background: #0077b0;
	border-color: #005a85;
}

.dpl-ws-version-info:active {
	background: #004d73;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.28);
}

.dpl-portal-intro-text {
	margin: 0;
	color: #67737a;
	font-size: 10px;
	font-weight: 400;
	line-height: 1.38;
}

.dpl-portal-intro-text strong {
	color: #303840;
	font-weight: 500;
}

/* ----- Filter shell ----- */
.dpl-filter-shell {
	position: relative;
	border-bottom: 1px solid #dce1e4;
	background: #fff;
	margin: 0 0 12px;
}

.dpl-filter-head {
	position: sticky;
	top: 0;
	z-index: 200;
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid #edf0f2;
}

.dpl-head-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto auto;
	gap: 7px;
	align-items: center;
	padding: 7px 0 6px;
}

.dpl-search {
	position: relative;
	display: block;
	margin: 0;
}

.dpl-search .dpl-filter-input {
	width: 100%;
	max-width: none;
	height: 32px;
	padding: 0 33px 0 11px;
	border: 1px solid #cbd3d7;
	border-radius: 8px;
	background: linear-gradient(#fff, #f8f9fa);
	color: #263238;
	font-size: 11px;
	outline: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dpl-search .dpl-filter-input:focus {
	border-color: #9dc9dc;
	box-shadow: 0 0 0 4px rgba(0, 102, 153, 0.08);
}

.dpl-search::after {
	content: "\2315"; /* search glyph, CSS escape (charset-safe) */
	position: absolute;
	right: 11px;
	top: 5px;
	font-size: 17px;
	color: #82939d;
	line-height: 1;
	pointer-events: none;
}

.dpl-head-btn {
	height: 32px;
	padding: 0 11px;
	border: 1px solid #d2d8dc;
	border-radius: 8px;
	background: linear-gradient(#fff, #f5f7f8);
	color: #334047;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.035em;
	cursor: pointer;
	box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(0, 0, 0, 0.035);
	white-space: nowrap;
	font-family: Arial, Helvetica, sans-serif;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

/* FILTER open/close chevrons — same triangle style both ways */
.dpl-filter-chev {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	vertical-align: middle;
	position: relative;
	top: 0;
	flex: 0 0 auto;
}

/* open: points down */
.dpl-filter-chev-down {
	border-top: 5px solid currentColor;
	border-bottom: 0;
	top: 1px;
}

/* close: points up (same geometry) */
.dpl-filter-chev-up {
	border-bottom: 5px solid currentColor;
	border-top: 0;
	top: -1px;
}

.dpl-head-btn:hover {
	background: #fff;
}

.dpl-head-btn.active {
	border-color: var(--dpl-blue-border);
	background: linear-gradient(to bottom, #f7fcff 0%, var(--dpl-blue-soft) 100%);
	color: var(--dpl-blue);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 0 1px rgba(0, 102, 153, 0.025);
}

.dpl-head-btn.filter-open {
	border-color: #990000;
	background: #bb0000;
	color: #ffffff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		inset 0 -1px 0 rgba(0, 0, 0, 0.16),
		0 1px 2px rgba(0, 0, 0, 0.08);
}

.dpl-head-status {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	min-height: 30px;
	padding: 3px 0 6px;
}

.dpl-micro-label {
	padding-right: 7px;
	color: #98a3a9;
	text-transform: uppercase;
	letter-spacing: 0.13em;
	font-size: 7px;
	font-weight: 700;
	text-align: right;
}

.dpl-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	min-width: 0;
	align-items: center;
}

.dpl-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 26px;
	height: auto;
	padding: 4px 10px;
	border: 1px solid var(--dpl-yellow-border);
	border-radius: 999px;
	background: linear-gradient(var(--dpl-yellow-hi), var(--dpl-yellow));
	color: #111;
	/* readable AKTIV chips (was 8px - too small for price numbers) */
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.04);
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	text-transform: none;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.dpl-chip:hover {
	filter: brightness(1.03);
}

.dpl-chip-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	opacity: 0.9;
	margin-left: 1px;
}

.dpl-status-count {
	padding-left: 8px;
	color: #7d888e;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}

/* Drawer: closed = display none (reliable). Open = block (no max-height trap). */
.dpl-root .dpl-drawer,
#domains-preisliste .dpl-drawer,
.dpl-drawer {
	display: none !important;
	overflow: visible;
	max-height: none;
	opacity: 1;
	pointer-events: none;
	visibility: hidden;
}

.dpl-root .dpl-drawer.is-open,
#domains-preisliste .dpl-drawer.is-open,
.dpl-drawer.is-open {
	display: block !important;
	overflow: visible;
	max-height: none !important;
	opacity: 1 !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

.dpl-drawer-inner {
	padding: 3px 0 8px;
	background: linear-gradient(#fbfcfc 0%, #fff 35%, #fafbfb 100%);
}

.dpl-filter-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr);
	align-items: start;
	border-top: 1px solid var(--dpl-line2);
	padding-top: 7px;
}

.dpl-filter-row:first-child {
	border-top: 0;
}

.dpl-row-label {
	padding: 6px 7px 0 0;
	color: #929ea4;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 7px;
	font-weight: 700;
	text-align: right;
}

.dpl-options {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding: 0 0 7px;
}

.dpl-opt,
.dpl-subopt {
	appearance: none;
	min-height: 27px;
	padding: 0 10px;
	border: 1px solid #dce2e5;
	background: #fff;
	border-radius: 999px;
	color: #4d5960;
	font-size: 11px;
	cursor: pointer;
	white-space: nowrap;
	font-family: Arial, Helvetica, sans-serif;
	transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}

/* BEREICH bleibt trotz größerer Schrift einzeilig */
.dpl-options[data-dpl-fgroup="region"] {
	flex-wrap: nowrap;
	gap: 4px;
}

.dpl-options[data-dpl-fgroup="region"] .dpl-opt {
	padding-left: 8px;
	padding-right: 8px;
}

.dpl-opt:hover,
.dpl-subopt:hover {
	background: #f2f4f5;
	color: #20272b;
}

.dpl-opt.active,
.dpl-subopt.active {
	border-color: var(--dpl-blue-border);
	background: linear-gradient(to bottom, #f8fcfe 0%, var(--dpl-blue-soft) 100%);
	color: var(--dpl-blue);
	font-weight: 700;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 1px rgba(0, 102, 153, 0.035);
}

.dpl-opt.active:not(.reset)::after,
.dpl-subopt.active:not(.reset)::after {
	content: "\00d7";
	margin-left: 6px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: var(--dpl-blue);
}

.dpl-opt.reset.active {
	background: #eef1f2;
	border-color: #d9dfe2;
	color: #4f5a60;
	box-shadow: none;
}

.dpl-opt[data-sub="1"]::before {
	content: "\25be";
	font-size: 8px;
	margin-right: 5px;
	opacity: 0.65;
}

.dpl-gtld-row,
.dpl-begriff-row {
	display: none;
	grid-template-columns: 44px minmax(0, 1fr);
	border-top: 1px solid #e9edef;
	background: linear-gradient(#fafbfb, #f5f7f8);
}

.dpl-gtld-row.is-show,
.dpl-begriff-row.is-show {
	display: grid;
}

.dpl-gtld-row[hidden],
.dpl-begriff-row[hidden] {
	display: none !important;
}

.dpl-gtld-row.is-show[hidden],
.dpl-begriff-row.is-show[hidden] {
	display: grid !important;
}

.dpl-gtld-row .dpl-options,
.dpl-begriff-row .dpl-options {
	padding-top: 7px;
}

/* INFOSUCHE field in drawer */
.dpl-info-search-wrap {
	padding: 0 0 7px;
	width: 100%;
}

.dpl-info-search {
	display: block;
	width: 100%;
	max-width: 320px;
	margin: 0;
	position: relative;
}

.dpl-info-search-input {
	width: 100%;
	height: 30px;
	padding: 0 10px;
	border: 1px solid #cbd3d7;
	border-radius: 8px;
	background: linear-gradient(#fff, #f8f9fa);
	color: #263238;
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box;
	outline: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.03);
}

.dpl-info-search-input:focus {
	border-color: #9dc9dc;
	box-shadow: 0 0 0 4px rgba(0, 102, 153, 0.08);
}

.dpl-info-search-input::placeholder {
	color: #8a949a;
}

.dpl-subopt {
	min-height: 24px;
	padding: 0 8px;
	border-color: #dde3e6;
	background: #fff;
	font-size: 9px;
}

/* Price block - compact von/bis (study: short fields, slider in middle) */
.dpl-price-pane {
	padding: 0 0 10px;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

.dpl-filter-row:has(.dpl-price-pane) .dpl-row-label {
	padding-top: 20px;
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}

.dpl-price-top {
	display: grid;
	grid-template-columns: 64px minmax(80px, 1fr) 64px;
	gap: 8px;
	align-items: end;
	min-width: 0;
	max-width: 100%;
}

.dpl-price-field {
	min-width: 0;
	width: 64px;
	max-width: 64px;
	box-sizing: border-box;
}

.dpl-price-field label {
	display: block;
	margin: 0 0 3px;
	color: #849098;
	font-size: 7px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: center;
}

.dpl-money {
	position: relative;
	width: 64px;
	max-width: 64px;
	box-sizing: border-box;
}

.dpl-money input[type="number"],
.dpl-money input.dpl-price-num {
	display: block;
	width: 64px !important;
	max-width: 64px !important;
	min-width: 0 !important;
	height: 29px;
	padding: 0 14px !important;
	border: 1px solid #cfd6da;
	border-radius: 7px;
	background: linear-gradient(#ffffff, #f7f8f9);
	color: #20272b;
	font-size: 10px;
	line-height: 29px;
	outline: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.03);
	font-family: Arial, Helvetica, sans-serif;
	box-sizing: border-box !important;
	-moz-appearance: textfield;
	appearance: textfield;
	text-align: center;
	font-weight: 700;
}

.dpl-price-field:first-child .dpl-money input {
	background: linear-gradient(
		to bottom,
		#ffffff 0%,
		#f4fbf5 100%
	);
}

.dpl-price-field:last-child .dpl-money input {
	background: linear-gradient(
		to bottom,
		#ffffff 0%,
		#fff5f5 100%
	);
}

/* hide spin buttons that stretch width in some browsers */
.dpl-money input[type="number"]::-webkit-outer-spin-button,
.dpl-money input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.dpl-money input[type="number"]:focus,
.dpl-money input.dpl-price-num:focus {
	border-color: #d1a11a;
	box-shadow: 0 0 0 3px rgba(255, 194, 26, 0.16);
}

.dpl-money::after {
	content: "\20ac";
	position: absolute;
	right: 5px;
	top: 8px;
	color: #69767d;
	font-size: 9px;
	pointer-events: none;
	line-height: 1;
}

.dpl-price-presets button.is-active {
	border-color: var(--dpl-blue-border, #9fc6d9);
	background: linear-gradient(to bottom, #f8fcfe 0%, var(--dpl-blue-soft, #eaf4f9) 100%);
	color: var(--dpl-blue, #006699);
	font-weight: 700;
}

.dpl-range-wrap {
	position: relative;
	height: 29px;
	padding: 0 9px;
	border-radius: 7px;
	background: linear-gradient(
		to bottom,
		rgba(255, 255, 255, 1) 0%,
		rgba(252, 253, 253, 0.98) 16%,
		rgba(244, 246, 247, 0.92) 31%,
		rgba(225, 229, 231, 0.82) 43%,
		rgba(195, 202, 205, 0.76) 49%,
		rgba(181, 189, 193, 0.72) 52%,
		rgba(216, 221, 223, 0.8) 59%,
		rgba(241, 243, 244, 0.9) 72%,
		rgba(251, 252, 252, 0.98) 88%,
		rgba(255, 255, 255, 1) 100%
	);
	border: 0;
	box-shadow: none;
}

.dpl-range-wrap::before {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	top: 3px;
	height: 4px;
	opacity: .30;
	background:
		repeating-linear-gradient(
			to right,
			rgba(40, 48, 52, .55) 0 1px,
			transparent 1px 12px
		);
}

.dpl-range-wrap::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 3px;
	height: 3px;
	opacity: .18;
	background:
		repeating-linear-gradient(
			to right,
			rgba(255, 255, 255, .95) 0 1px,
			transparent 1px 12px
		);
}

.dpl-range-track {
	position: absolute;
	left: 17px;
	right: 17px;
	top: 12px;
	height: 5px;
	border-radius: 4px;
	background: linear-gradient(to bottom, #252b2f 0%, #111619 45%, #333a3e 100%);
	border: 1px solid #656d72;
	box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.72), inset 0 -1px 0 rgba(255, 255, 255, 0.12),
		0 1px 0 rgba(255, 255, 255, 0.75);
}

.dpl-range-fill {
	position: absolute;
	left: 0%;
	right: 80%;
	top: 13px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(to bottom, #ffe989 0%, #ffc21a 52%, #df9500 100%);
	box-shadow: 0 0 5px rgba(255, 194, 26, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
	pointer-events: none;
}

.dpl-range-wrap input[type="range"] {
	position: absolute;
	left: 9px;
	top: 0;
	width: calc(100% - 18px);
	height: 29px;
	margin: 0;
	background: transparent;
	pointer-events: none;
	appearance: none;
	-webkit-appearance: none;
	z-index: 4;
}

.dpl-range-wrap input[type="range"]::-webkit-slider-runnable-track {
	height: 6px;
	background: transparent;
	border: 0;
}

.dpl-range-wrap input[type="range"]::-moz-range-track {
	height: 6px;
	background: transparent;
	border: 0;
}

.dpl-range-wrap input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 24px;
	margin-top: -10px;
	border-radius: 5px;
	border: 1px solid #70787c;
	background: linear-gradient(
		to right,
		#8f9699 0%,
		#e9ecee 14%,
		#b8bec1 30%,
		#f7f8f8 49%,
		#a8afb2 68%,
		#e3e6e7 84%,
		#858d91 100%
	);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(0, 0, 0, 0.2),
		0 2px 4px rgba(0, 0, 0, 0.28);
	pointer-events: auto;
	cursor: grab;
}

.dpl-range-wrap input[type="range"]::-webkit-slider-thumb:active {
	cursor: grabbing;
	box-shadow:
		inset 0 2px 3px rgba(0, 0, 0, .28),
		inset 0 -1px 0 rgba(255, 255, 255, .55),
		0 1px 2px rgba(0, 0, 0, .30);
}

.dpl-range-wrap input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 24px;
	border-radius: 5px;
	border: 1px solid #70787c;
	background: linear-gradient(
		to right,
		#8f9699 0%,
		#e9ecee 14%,
		#b8bec1 30%,
		#f7f8f8 49%,
		#a8afb2 68%,
		#e3e6e7 84%,
		#858d91 100%
	);
	pointer-events: auto;
	cursor: grab;
}

.dpl-range-wrap input[type="range"]::-moz-range-thumb:active {
	cursor: grabbing;
	box-shadow:
		inset 0 2px 3px rgba(0, 0, 0, .28),
		inset 0 -1px 0 rgba(255, 255, 255, .55),
		0 1px 2px rgba(0, 0, 0, .30);
}

.dpl-price-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: 7px;
}

.dpl-price-presets {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
}

.dpl-price-presets button {
	height: 27px;
	padding: 0 10px;
	border: 1px solid #dce2e5;
	border-radius: 999px;
	background: #fff;
	color: #5b686f;
	font-size: 9px;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
}

.dpl-price-presets button:hover {
	border-color: #c7d0d5;
	background: #f8f9fa;
}


/* LETZTE AENDERUNG — eigener Sortiermodus nach den Preispillen */
.dpl-price-presets .dpl-changes-btn {
	margin-left: 4px;
	padding: 0 11px;
	border: 1px solid #cbd2d5;
	border-radius: 6px;
	background:
		linear-gradient(to bottom, #ffffff 0%, #f0f2f3 100%);
	color: #505d63;
	font-weight: 600;
	letter-spacing: .025em;
	white-space: nowrap;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .95),
		0 1px 2px rgba(0, 0, 0, .04);
}

.dpl-price-presets .dpl-changes-btn:hover {
	border-color: #b68b8b;
	background:
		linear-gradient(to bottom, #ffffff 0%, #f7eeee 100%);
	color: #990000;
}

.dpl-price-presets .dpl-changes-btn.active {
	border-color: #8f0000;
	background: #bb0000;
	color: #fff;
	font-weight: 600;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .18),
		inset 0 -1px 1px rgba(0, 0, 0, .15),
		0 1px 2px rgba(0, 0, 0, .08);
}

.dpl-price-presets .dpl-changes-btn.active:hover {
	border-color: #760000;
	background: #c60000;
	color: #fff;
}

.dpl-price-presets .dpl-changes-btn.active::after {
	content: "\00d7";
	margin-left: 6px;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
}

.dpl-apply {
	/* hidden for now: price filters live via slider + euro pills */
	display: none !important;
	height: 25px;
	padding: 0 11px;
	border: 1px solid var(--dpl-yellow-border);
	border-radius: 7px;
	background: linear-gradient(var(--dpl-yellow-hi), var(--dpl-yellow) 55%, var(--dpl-yellow-lo));
	color: #111;
	font-size: 9px;
	font-weight: 700;
	cursor: pointer;
	font-family: Arial, Helvetica, sans-serif;
	white-space: nowrap;
}

.dpl-drawer-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #e9edef;
	padding: 7px 0 0;
	margin-top: 1px;
}

.dpl-drawer-note {
	color: #89949a;
	font-size: 8px;
}

.dpl-foot-actions {
	display: flex;
	gap: 6px;
}

.dpl-linkbtn {
	border: 0;
	background: transparent;
	color: #707d84;
	font-size: 8px;
	font-weight: 700;
	cursor: pointer;
	padding: 4px 0;
	font-family: Arial, Helvetica, sans-serif;
}

.dpl-linkbtn:hover {
	color: #111;
}

/* ----- Thead: study sort pills + labels ----- */
.dpl-table thead td.dpl-th {
	height: 40px;
	padding: 6px 4px !important;
	vertical-align: middle;
	white-space: nowrap;
	border-bottom: 0 !important;
	font-size: 9px !important;
	font-weight: normal;
	color: #343d42;
	line-height: 1;
	overflow: visible;
	text-align: center;
}

/* DOMAIN cell spans 2 cols — center content on tld|idx seam */
.dpl-table thead td.dpl-th-domain {
	text-align: center;
	padding-left: 2px !important;
	padding-right: 2px !important;
}

.dpl-th-label {
	display: inline-block;
	font: 600 9px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #4e5c64;
	padding: 3px 4px;
}

.dpl-sort-head {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	width: 100%;
}

.dpl-sort-btn {
	appearance: none;
	border: 1px solid transparent;
	background: transparent;
	color: #4e5c64;
	font: 600 12px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 999px;
	padding: 5px 8px 5px 9px;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
	font-family: Arial, Helvetica, sans-serif;
}

.dpl-sort-btn:hover {
	background: #f3f6f7;
	color: #203038;
}

.dpl-sort-arrows {
	display: inline-flex;
	flex-direction: column;
	gap: 1px;
	margin-left: 4px;
	position: relative;
	top: -1px;
	vertical-align: middle;
}

.dpl-sort-arrows i {
	display: block;
	width: 0;
	height: 0;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	opacity: 0.38;
}

.dpl-sort-arrows .up {
	border-bottom: 4px solid currentColor;
}

.dpl-sort-arrows .down {
	border-top: 4px solid currentColor;
}

.dpl-sort-btn.is-active {
	border-color: #c9d8df;
	background: linear-gradient(to bottom, #fbfdfe 0%, #eaf4f9 100%);
	color: #006699;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 1px 1px rgba(0, 102, 153, 0.04);
}

.dpl-sort-btn.is-active.asc .dpl-sort-arrows .up,
.dpl-sort-btn.is-active.desc .dpl-sort-arrows .down {
	opacity: 1;
}

.dpl-sort-btn.is-active.asc .dpl-sort-arrows .down,
.dpl-sort-btn.is-active.desc .dpl-sort-arrows .up {
	opacity: 0.18;
}

/*
 * DOMAIN head spans tld+idx (colspan 2).
 * Sort pill centered on the seam between TLD | index columns.
 * Hex toggle stays left, does not shift the pill.
 */
.dpl-domain-head {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 36px;
	overflow: visible;
	transform: none;
	box-sizing: border-box;
	/* optical center on tld|idx edge: toggle eats left space — nudge pill slightly right of true center if needed */
	padding-left: 0;
	padding-right: 0;
}

.dpl-domain-head .dpl-sort-head {
	margin: 0 auto;
	/* sit on the column boundary (tld 100 + idx 72 → center of span) */
	transform: translateX(0);
}

/* INFO label centered in flag+info colspan=2 */
.dpl-th-info {
	text-align: center !important;
	vertical-align: middle !important;
}

.dpl-th-info .dpl-th-label {
	display: inline-block;
	width: 100%;
	text-align: center;
	box-sizing: border-box;
}

/* interval header cell tighter */
.dpl-th-clock {
	width: 44px;
	max-width: 48px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.dpl-group-toggle-wrap {
	position: absolute;
	left: 0;
	top: 63px;
	width: 28px;
	height: 24px;
	transform: translateY(-50%);
	z-index: 20;
	overflow: visible;
}


/*
 * TLD-GRUPPIERUNG · SCHALTSKALA
 *
 * Mittelpunkt entspricht der vorhandenen Schalterachse.
 *
 * OFF = 11 Uhr
 * 1   = 13 Uhr
 * 2   = 15 Uhr
 * ?   = 17 Uhr
 */
.dpl-group-scale {
	position: absolute;
	left: 14px;
	top: 16px;
	z-index: 1;

	width: 52px;
	height: 52px;

	transform: translate(-50%, -50%);

	overflow: visible;
	pointer-events: none;
}


/* runder Skalenbogen von 11 bis 17 Uhr */
.dpl-group-scale::before {
	content: "";

	position: absolute;
	inset: 0;

	border-radius: 50%;

	background:
		conic-gradient(
			from -30deg,
			#747c80 0deg 180deg,
			transparent 180deg 360deg
		);

	-webkit-mask:
		radial-gradient(
			farthest-side,
			transparent calc(100% - 2px),
			#000 calc(100% - 1px)
		);

	mask:
		radial-gradient(
			farthest-side,
			transparent calc(100% - 2px),
			#000 calc(100% - 1px)
		);

	opacity: .72;
}


/*
 * Kleine Synthesizer-Teilstriche.
 *
 * Je zwei Zwischenmarken zwischen den vier
 * eigentlichen Raststellungen.
 */
.dpl-group-scale::after {
	content: "";

	position: absolute;
	inset: -3px;

	border-radius: 50%;

	background:
		conic-gradient(
			from -30deg,

			transparent 0deg 19deg,
			#747c80 19deg 20deg,
			transparent 20deg 39deg,
			#747c80 39deg 40deg,

			transparent 40deg 79deg,
			#747c80 79deg 80deg,
			transparent 80deg 99deg,
			#747c80 99deg 100deg,

			transparent 100deg 139deg,
			#747c80 139deg 140deg,
			transparent 140deg 159deg,
			#747c80 159deg 160deg,

			transparent 160deg 360deg
		);

	-webkit-mask:
		radial-gradient(
			farthest-side,
			transparent calc(100% - 4px),
			#000 calc(100% - 4px),
			#000 calc(100% - 2px),
			transparent calc(100% - 2px)
		);

	mask:
		radial-gradient(
			farthest-side,
			transparent calc(100% - 4px),
			#000 calc(100% - 4px),
			#000 calc(100% - 2px),
			transparent calc(100% - 2px)
		);

	opacity: .54;
}


/* Rastmarken */
.dpl-group-scale-tick {
	position: absolute;
	z-index: 2;

	width: 1px;
	height: 6px;

	background: #646c70;
}


/* OFF · 11 Uhr */
.dpl-group-scale-tick-off {
	left: 12px;
	top: 2px;
	transform: rotate(-30deg);
}


/* 1 · 13 Uhr */
.dpl-group-scale-tick-1 {
	left: 39px;
	top: 2px;
	transform: rotate(30deg);
}


/* 2 · 15 Uhr */
.dpl-group-scale-tick-2 {
	left: 49px;
	top: 23px;
	transform: rotate(90deg);
}


/* ? · 17 Uhr */
.dpl-group-scale-tick-help {
	left: 39px;
	top: 44px;
	transform: rotate(150deg);
}


/* Skalenbeschriftung */
.dpl-group-scale-label {
	position: absolute;
	z-index: 12;

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

	min-width: 13px;
	height: 13px;
	box-sizing: border-box;

	margin: 0;
	padding: 0 2px;

	border: 1px solid transparent;
	border-radius: 3px;

	background: transparent;
	color: #4f585d;

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

	white-space: nowrap;

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

	cursor: pointer;
	pointer-events: auto;

	appearance: none;
	-webkit-appearance: none;

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

/*
 * 1 / 2 / ? besitzen im Ruhezustand bereits
 * die kleine physische Schaltfläche.
 *
 * OFF bleibt dagegen als reine Skalenbeschriftung
 * sichtbar.
 */
.dpl-group-scale-label-1:not(.is-active),
.dpl-group-scale-label-2:not(.is-active),
.dpl-group-scale-label-help:not(.is-active) {
	border-color: #aeb7bb;

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

	color: #263238;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .98),
		0 1px 2px rgba(0, 0, 0, .10);
}


/*
 * OFF · Hover:
 * neutrale bisherige Mini-Button-Ansicht.
 */
.dpl-group-scale-label-off:not(.is-active):hover,
.dpl-group-scale-label-off:not(.is-active):focus-visible {
	border-color: #aeb7bb;

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

	color: #263238;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .98),
		0 1px 2px rgba(0, 0, 0, .10);

	outline: 0;
}


/*
 * 1 / 2 / ? · Hover:
 * klarer roter Schaltzustand.
 */
.dpl-group-scale-label-1:not(.is-active):hover,
.dpl-group-scale-label-1:not(.is-active):focus-visible,
.dpl-group-scale-label-2:not(.is-active):hover,
.dpl-group-scale-label-2:not(.is-active):focus-visible,
.dpl-group-scale-label-help:not(.is-active):hover,
.dpl-group-scale-label-help:not(.is-active):focus-visible {
	border-color: #990000;
	background: #bb0000;
	color: #ffffff;

	text-shadow: none;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .18),
		inset 0 -1px 0 rgba(0, 0, 0, .15),
		0 1px 2px rgba(0, 0, 0, .10);

	outline: 0;
}


/*
 * ACTIVE:
 * keine Buttonfläche.
 *
 * Der mechanische Wrench übernimmt bewusst
 * vollständig die Anzeige der aktiven Stellung.
 */
.dpl-group-scale-label.is-active,
.dpl-group-scale-label.is-active:hover,
.dpl-group-scale-label.is-active:focus-visible {
	border-color: transparent;
	background: transparent;
	color: #4f585d;

	box-shadow: none;
	text-shadow:
		0 1px 0 rgba(255, 255, 255, .92);

	outline: 0;
}


/*
 * Ein einziger fester Info-Ort fuer alle vier
 * Schaltstellungen.
 */
.dpl-group-switch-info {
	position: absolute;
	z-index: 50;

	left: -8px;
	top: -63px;

	display: block;

	width: 136px;
	box-sizing: border-box;

	padding: 4px 6px;

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

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

	color: #566168;

	font: 400 8px/1.25 Arial, Helvetica, sans-serif;

	text-align: left;
	white-space: normal;
	overflow-wrap: break-word;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .98),
		0 2px 5px rgba(0, 0, 0, .10);

	opacity: 0;
	visibility: hidden;

	transform: translateY(2px);

	pointer-events: none;

	transition:
		opacity .10s ease,
		transform .10s ease,
		visibility .10s ease;
}

.dpl-group-switch-info.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}


.dpl-group-scale-label-off {
	left: -10px;
	top: 5px;
}

.dpl-group-scale-label-1 {
	left: 40px;
	top: -13px;
}

.dpl-group-scale-label-2 {
	left: 60px;
	top: 21px;
}

.dpl-group-scale-label-help {
	left: 40px;
	top: 54px;
}


/*
 * ================================================================
 * GRUPPIERUNG · HILFEANZEIGE
 * ================================================================
 *
 * Wird spaeter bei Schalterstellung "?" anstelle
 * der normalen Domainzeilen eingeblendet.
 */
.dpl-group-help-body[hidden] {
	display: none !important;
}

.dpl-group-help-row > td {
	height: auto !important;
	padding: 18px 18px 24px !important;

	border: 0 !important;
	background: transparent !important;

	vertical-align: top !important;
}


/*
 * Zentrale technische Infoplatte.
 */
.dpl-group-help {
	width: 100%;
	max-width: 520px;
	box-sizing: border-box;

	margin: 0 auto;
	padding: 0;

	border: 1px solid #c5cccf;
	border-radius: 7px;

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

	color: #303a3f;

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .98),
		0 2px 7px rgba(0, 0, 0, .07);

	overflow: hidden;
}


/*
 * Kopf.
 */
.dpl-group-help-head {
	padding: 12px 14px 11px;

	border-bottom: 1px solid #e0e4e6;

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

	text-align: center;
}

.dpl-group-help-kicker {
	display: block;

	margin: 0 0 5px;

	color: #990000;

	font: 600 8px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .12em;
}

.dpl-group-help-head > strong {
	display: block;

	color: #273238;

	font: 500 13px/1.2 Arial, Helvetica, sans-serif;
}

.dpl-group-help-head > p {
	max-width: 390px;

	margin: 6px auto 0;

	color: #69747a;

	font: 400 10px/1.4 Arial, Helvetica, sans-serif;
}


/*
 * Drei Schaltstellungen.
 */
.dpl-group-help-modes {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;

	background: #fbfcfc;
}

.dpl-group-help-mode {
	display: grid;
	grid-template-columns: 32px 1fr;
	gap: 8px;

	min-width: 0;

	padding: 12px 10px 13px;
}

.dpl-group-help-mode + .dpl-group-help-mode {
	border-left: 1px solid #e1e5e7;
}


/*
 * OFF / 1 / 2
 */
.dpl-group-help-mode-id {
	display: flex;
	align-items: center;
	justify-content: center;

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

	border: 1px solid #aeb7bb;
	border-radius: 50%;

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

	color: #354147;

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

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

.dpl-group-help-mode > div {
	min-width: 0;
}

.dpl-group-help-mode strong {
	display: block;

	margin: 1px 0 5px;

	color: #3f4b51;

	font: 600 8px/1.2 Arial, Helvetica, sans-serif;
	letter-spacing: .035em;
}

.dpl-group-help-mode p {
	margin: 0;

	color: #677279;

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


/*
 * Untere Bedienhilfe.
 */
.dpl-group-help-foot {
	padding: 8px 12px 9px;

	border-top: 1px solid #e0e4e6;

	background: #f2f4f4;

	color: #68747a;

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

	text-align: center;
}

.dpl-group-help-foot strong {
	color: #303a3f;
	font-weight: 600;
}


/*
 * Alter wechselnder Wrench-Tooltip entfällt.
 * Zustandsinformationen erscheinen kuenftig ausschließlich
 * im festen Mini-Infofeld oberhalb des Schalters.
 */
.dpl-group-toggle-wrap::after {
	display: none;
}

.dpl-hex-toggle {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;

	width: 28px;
	height: 24px;

	display: block;
	cursor: pointer;
	overflow: visible;
}

.dpl-hex-toggle input {
	/* hit area only on the hex control — do NOT cover DOMAIN sort button */
	position: absolute;
	left: 0;
	top: 0;
	width: 28px;
	height: 24px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 30;
}

.dpl-sort-btn {
	position: relative;
	z-index: 40; /* above hex hit area */
	pointer-events: auto;
}

.dpl-hex-hardware {
	position: absolute;
	inset: 0;
	overflow: visible;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16));
}

.dpl-hex-hardware::before {
	content: "";
	position: absolute;
	left: 1px;
	top: 4px;
	width: 25px;
	height: 20px;
	border-radius: 50%;
	background: radial-gradient(
		ellipse at center,
		rgba(151, 159, 163, 0.1) 0%,
		rgba(220, 224, 226, 0.06) 44%,
		rgba(255, 255, 255, 0) 75%
	);
}

.dpl-hex-nut {
	position: absolute;
	left: 5px;
	top: 8px;
	width: 18px;
	height: 16px;
	clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
	background: linear-gradient(
		135deg,
		#626a6e 0%,
		#edf1f2 14%,
		#9ca4a8 29%,
		#ffffff 43%,
		#7e868a 58%,
		#e2e6e8 73%,
		#727a7e 88%,
		#c4cacc 100%
	);
	box-shadow: inset 0 0 0 1px rgba(66, 73, 77, 0.3), 0 1px 1px rgba(0, 0, 0, 0.16);
}

.dpl-hex-washer {
	position: absolute;
	left: 8px;
	top: 10px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: conic-gradient(
		#7a8286,
		#f8fafb,
		#9ca4a8,
		#ffffff,
		#777f83,
		#e8ecee,
		#858d91,
		#f7f9fa,
		#727a7e
	);
	box-shadow: inset 0 0 0 1px rgba(69, 76, 80, 0.32), 0 0.5px 1px rgba(0, 0, 0, 0.15);
}

.dpl-hex-bush {
	position: absolute;
	left: 11px;
	top: 13px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 32%, #656d71 0%, #353b3e 38%, #111416 72%, #080a0b 100%);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.18);
	z-index: 4;
}

.dpl-hex-arm {
	position: absolute;
	left: 12px;
	top: -27px;
	width: 4px;
	height: 44px;
	border-radius: 3px;
	transform-origin: 50% 43px;
	transform: rotate(-18deg);
	background: linear-gradient(
		to right,
		#60686c 0%,
		#dce1e3 14%,
		#ffffff 30%,
		#9ca4a8 49%,
		#f7f9fa 67%,
		#727a7e 84%,
		#555d61 100%
	);
	box-shadow: inset 0.5px 0 0 rgba(255, 255, 255, 0.85), 1px 1px 1px rgba(0, 0, 0, 0.2);
	transition: transform 0.18s cubic-bezier(0.18, 0.82, 0.22, 1);
	z-index: 5;
}

.dpl-hex-cap {
	position: absolute;
	left: 8px;
	top: -32px;
	width: 12px;
	height: 12px;
	border-radius: 5px 5px 4px 4px;
	transform-origin: 50% 48px;
	transform: rotate(-18deg);
	background: linear-gradient(
		to right,
		#4b5357 0%,
		#cbd1d3 12%,
		#ffffff 27%,
		#929a9e 45%,
		#f9fbfb 62%,
		#a7afb3 77%,
		#5d6569 100%
	);
	border: 1px solid rgba(70, 77, 81, 0.62);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(0, 0, 0, 0.16),
		0 1px 2px rgba(0, 0, 0, 0.24);
	transition: transform 0.18s cubic-bezier(0.18, 0.82, 0.22, 1);
	z-index: 6;
}

.dpl-hex-led {
	position: absolute;
	left: 50%;
	top: 3px;
	width: 3px;
	height: 3px;
	margin-left: -1.5px;
	border-radius: 50%;
	background: radial-gradient(
		circle at 34% 28%,
		rgba(255, 255, 255, 0.3) 0 10%,
		#500807 24%,
		#220202 62%,
		#0d0000 100%
	);
	box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.15), 0 0 0 0.5px rgba(60, 0, 0, 0.55);
}

/*
 * Vier reale Raststellungen des Hebels.
 *
 * Vertikaler Hebel = 12 Uhr.
 *
 * OFF = 11 Uhr = -30deg
 * 1   = 13 Uhr =  30deg
 * 2   = 15 Uhr =  90deg
 * ?   = 17 Uhr = 150deg
 */
.dpl-root[data-dpl-group="0"] .dpl-hex-arm,
.dpl-root[data-dpl-group="0"] .dpl-hex-cap {
	transform: rotate(-30deg);
}

.dpl-root[data-dpl-group="1"] .dpl-hex-arm,
.dpl-root[data-dpl-group="1"] .dpl-hex-cap {
	transform: rotate(30deg);
}

.dpl-root[data-dpl-group="2"] .dpl-hex-arm,
.dpl-root[data-dpl-group="2"] .dpl-hex-cap {
	transform: rotate(90deg);
}

.dpl-root[data-dpl-group="3"] .dpl-hex-arm,
.dpl-root[data-dpl-group="3"] .dpl-hex-cap {
	transform: rotate(150deg);
}

.dpl-hex-toggle input:checked + .dpl-hex-hardware .dpl-hex-led {
	background: radial-gradient(
		circle at 34% 28%,
		#ffffff 0 9%,
		#ffc4be 11%,
		#ff4b3d 30%,
		#ed1008 57%,
		#a00000 79%,
		#560000 100%
	);
	box-shadow: 0 0 1px rgba(255, 255, 255, 0.95), 0 0 3px rgba(255, 41, 30, 0.98),
		0 0 6px rgba(255, 0, 0, 0.72), 0 0 9px rgba(187, 0, 0, 0.33),
		inset 0 0 1px rgba(255, 255, 255, 0.72);
}

.dpl-hex-toggle input:focus-visible + .dpl-hex-hardware {
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16)) drop-shadow(0 0 3px rgba(0, 102, 153, 0.22));
}

/* Clock / interval — slightly smaller so INFO gets more width */
.dpl-interval-head {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	line-height: 1;
	min-height: 32px;
}

.dpl-interval-head .dpl-clock {
	display: block;
	font-size: 26px;
	line-height: 1;
	color: #2a3236;
	position: relative;
	top: 1px;
}

.dpl-th-price .dpl-sort-head {
	transform: none;
}

/*
 * Toolbar: compact centered cluster
 * [ Seite ] [ pager nums ] [ pro Seite ] — tight gaps, not full-width stretch
 */
.dpl-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	min-height: 28px;
	margin: 0;
	width: 100%;
	box-sizing: border-box;
}

.dpl-toolbar-top {
	margin: 0;
	padding-top: 0;
}

.dpl-toolbar-bottom {
	margin: 0;
}

.dpl-toolbar-left {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	flex: 0 0 auto;
}

.dpl-toolbar-center {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
}

.dpl-toolbar-right {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex: 0 0 auto;
}

.dpl-toolbar-right-stack {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	position: relative;
}

/* loading: overlay near pagesize, no layout shift */
.dpl-toolbar-right-stack .dpl-loading {
	position: absolute;
	left: 0;
	right: auto;
	bottom: auto;
	top: -14px;
	white-space: nowrap;
}

.dpl-table-wrap {
	margin-top: 12px;
}

/* pager lives inside table — no phantom gap from old external toolbar */
.dpl-table .dpl-pager-td .dpl-toolbar {
	max-width: 100%;
}

@media (max-width: 640px) {
	.dpl-portal-intro {
		grid-template-columns: 1fr;
	}
	.dpl-portal-intro-col + .dpl-portal-intro-col {
		border-left: 0;
		border-top: 1px solid #edf0f2;
		padding: 8px 3px 0;
	}
	.dpl-head-main {
		grid-template-columns: 1fr 1fr;
	}
	.dpl-search {
		grid-column: 1 / -1;
	}
	.dpl-head-btn {
		width: 100%;
	}
	.dpl-filter-row,
	.dpl-gtld-row.is-show {
		grid-template-columns: 1fr;
	}
	.dpl-row-label,
	.dpl-micro-label {
		text-align: left;
		padding: 4px 0 3px;
	}
	.dpl-head-status {
		grid-template-columns: 1fr;
	}
	.dpl-price-top {
		grid-template-columns: 74px minmax(0, 1fr) 74px;
	}
	.dpl-toolbar {
		grid-template-columns: 1fr;
		row-gap: 8px;
	}
	.dpl-toolbar-left,
	.dpl-toolbar-center,
	.dpl-toolbar-right {
		justify-content: center;
	}
}

/* ========================================================================
 * DOMAINS Steuerzentrale — kompakte Systemleiste + Availability-Popup
 * ======================================================================== */

/* Eine Zeile: Suche | Verfügbarkeit | Änderungen | Aktionen | Treuhand | Filter */
.dpl-head-main {
	grid-template-columns: minmax(165px, 1fr) 72px auto auto auto;
	gap: 4px;
	align-items: start;
	padding: 7px 0 10px;
}

.dpl-search-control {
	position: relative;
	min-width: 0;
}

.dpl-search-control .dpl-search {
	position: relative;
	display: block;
	min-width: 0;
	height: 36px;
	box-sizing: border-box;
	grid-column: auto;

	border: 1px solid #cbd3d7;
	border-radius: 7px;

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

	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .98),
		0 1px 2px rgba(0, 0, 0, .035);
}

.dpl-search-control .dpl-search .dpl-filter-input {
	position: absolute;
	left: 2px;
	top: 2px;

	width: calc(100% - 80px);
	min-width: 0;
	height: 30px;
	box-sizing: border-box;

	padding: 0 27px 0 7px;

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

	background:
		linear-gradient(
			to bottom,
			#eaf4eb 0%,
			#f4faf4 38%,
			#f7fbf7 100%
		);

	color: #263238;

	font-size: 12px;
	font-weight: 400;

	box-shadow:
		inset 0 2px 3px rgba(52, 82, 57, .16),
		inset 1px 0 1px rgba(52, 82, 57, .07);

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

.dpl-search-control .dpl-search .dpl-filter-input:focus {
	border-color: #8faf93;

	background:
		linear-gradient(
			to bottom,
			#e5f1e7 0%,
			#f2f9f3 42%,
			#f7fbf7 100%
		);

	box-shadow:
		inset 0 2px 3px rgba(48, 84, 54, .19),
		inset 1px 0 1px rgba(48, 84, 54, .08);

	outline: 0;
}

.dpl-search-control .dpl-search::after {
	right: 57px;
	top: 4px;

	font-size: 19px;
	font-weight: 500;
	line-height: 1;

	color: #62757e;

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

/* ========================================================================
 * DOMAIN-SUCHE — Kurzinfo + ausführliche Karte
 * ======================================================================== */

.dpl-search-control {
	z-index: 90;
}

/* Kleine Soforthilfe bei Fokus und Eingabe */
.dpl-search-quick-hint {
	position: absolute;
	left: 2px;
	bottom: calc(100% + 6px);
	z-index: 155;
	box-sizing: border-box;
	max-width: 310px;
	margin: 0;
	padding: 5px 8px 6px;
	border: 1px solid #b8c0c4;
	border-radius: 5px;
	background: #fffef8;
	color: #59646a;
	font: 400 9px/1.25 Arial, Helvetica, sans-serif;
	white-space: nowrap;
	box-shadow:
		0 3px 9px rgba(0, 0, 0, 0.13),
		inset 0 1px 0 rgba(255, 255, 255, 0.98);
	pointer-events: none;
	animation: dpl-search-quick-in .12s ease-out;
}

.dpl-search-quick-hint[hidden] {
	display: none !important;
}

.dpl-search-quick-hint strong {
	color: #bb0000;
	font-size: 10px;
	font-weight: 700;
}

.dpl-search-quick-hint::before {
	content: "";
	position: absolute;
	left: 19px;
	top: 100%;
	border: 5px solid transparent;
	border-top-color: #b8c0c4;
}

.dpl-search-quick-hint::after {
	content: "";
	position: absolute;
	left: 20px;
	top: 100%;
	border: 4px solid transparent;
	border-top-color: #fffef8;
}

@keyframes dpl-search-quick-in {
	from {
		opacity: 0;
		transform: translateY(2px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* ------------------------------------------------------------------------
 * Große Bedienkarte — öffnet später über den ?-Schalter NACH UNTEN
 * ------------------------------------------------------------------------ */

.dpl-search-help-card {
	position: absolute;
	left: 0;
	top: calc(100% + 7px);
	z-index: 175;
	width: 510px;
	max-width: calc(100vw - 26px);
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid #9da7ac;
	border-top-color: #bb0000;
	border-radius: 8px;
	background: #fbfaf5;
	color: #414b50;
	font: 400 10px/1.35 Arial, Helvetica, sans-serif;
	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.22),
		0 2px 6px rgba(0, 0, 0, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.98);
	animation: dpl-search-card-in .15s ease-out;
}

.dpl-search-help-card[hidden] {
	display: none !important;
}


/* Kartenkopf */
.dpl-search-help-head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 31px;
	box-sizing: border-box;
	padding: 6px 7px 6px 11px;
	border-bottom: 1px solid #d9d5ca;
	background:
		linear-gradient(to bottom, #fffdf9 0%, #f2eee5 100%);
}

.dpl-search-help-head strong {
	color: #a40000;
	font: 700 10px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .055em;
}

.dpl-search-help-head span {
	color: #747b7e;
	font: 400 9px/1.1 Arial, Helvetica, sans-serif;
}

.dpl-search-help-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	box-sizing: border-box;
	margin: 0 0 0 auto;
	padding: 0;
	border: 1px solid #c4c7c5;
	border-radius: 4px;
	background:
		linear-gradient(to bottom, #ffffff 0%, #e8e8e5 100%);
	color: #697176;
	font: 400 15px/17px Arial, Helvetica, sans-serif;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .95),
		0 1px 1px rgba(0, 0, 0, .05);
	transition:
		border-color .12s ease,
		background .12s ease,
		color .12s ease,
		box-shadow .12s ease;
}

.dpl-search-help-close:hover {
	border-color: #a76b6b;
	background:
		linear-gradient(to bottom, #ffffff 0%, #f5e9e9 100%);
	color: #bb0000;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, .98),
		0 0 0 2px rgba(187, 0, 0, .04);
}

.dpl-search-help-close:active {
	border-color: #8c0000;
	background: #eadada;
	color: #990000;
	box-shadow:
		inset 0 1px 2px rgba(0, 0, 0, .14);
}

.dpl-search-help-close:focus-visible {
	outline: 2px solid rgba(0, 102, 153, .22);
	outline-offset: 1px;
}


/* Zwei klar getrennte Bedienbereiche */
.dpl-search-help-grid {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	background: #fbfaf5;
}

.dpl-search-help-col {
	min-width: 0;
	padding: 0 10px 7px;
}

.dpl-search-help-col + .dpl-search-help-col {
	border-left: 1px solid #d8d5cd;
	background: rgba(245, 244, 239, 0.62);
}


/* Kleine Karteireiter-Header */
.dpl-search-help-colhead {
	margin: 0 -10px 6px;
	padding: 5px 10px 4px;
	border-bottom: 1px solid #ddd9d0;
	background: #efede7;
	color: #77746c;
	font: 700 8px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .085em;
}


/* Einzelne Anweisungen */
.dpl-search-help-block {
	padding: 5px 1px 6px;
}

.dpl-search-help-block + .dpl-search-help-block {
	border-top: 1px dotted #c8c6bf;
}

.dpl-search-help-block > strong {
	display: block;
	margin: 0 0 4px;
	color: #a40000;
	font: 700 9px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .045em;
}

.dpl-search-help-block p {
	margin: 4px 0 0;
	color: #505a5f;
	font: 400 9px/1.3 Arial, Helvetica, sans-serif;
}


/* Suchbeispiele als kleine physische Eingabetasten */
.dpl-search-help-examples {
	display: flex;
	flex-wrap: wrap;
	gap: 3px;
	margin: 0;
}

.dpl-search-help-examples span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 31px;
	height: 18px;
	box-sizing: border-box;
	padding: 0 6px;
	border: 1px solid #bec5c8;
	border-bottom-color: #aab2b6;
	border-radius: 4px;
	background:
		linear-gradient(to bottom, #ffffff 0%, #eceff0 100%);
	color: #243239;
	font: 600 9px/1 Arial, Helvetica, sans-serif;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.98),
		0 1px 1px rgba(0,0,0,.07);
}


/* Aa-Beispiele in der Karte */
.dpl-search-help-aa-row {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 21px;
}

.dpl-search-help-aa-row > strong {
	color: #697278;
	font: 700 8px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .05em;
}

.dpl-search-help-aa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 25px;
	height: 20px;
	box-sizing: border-box;
	border: 1px solid #c4cbce;
	border-radius: 5px;
	background: linear-gradient(to bottom, #fff 0%, #eceff0 100%);
	color: #606c72;
	font: 600 9px/1 Arial, Helvetica, sans-serif;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
}

.dpl-search-help-aa.is-active {
	border-color: #990000;
	background: #bb0000;
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.16),
		inset 0 -1px 0 rgba(0,0,0,.14);
}


/* Direkte WHOIS-Navigation als dritter Suchmodus */
.dpl-search-help-direct {
	padding: 8px 11px 9px;
	border-top: 1px solid #d8d5cd;
	background:
		linear-gradient(to bottom, #fbfcf8 0%, #f2f6f2 100%);
}

.dpl-search-help-direct-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0 0 6px;
}

.dpl-search-help-direct-head strong {
	color: #315e4d;
	font: 700 9px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .045em;
}

.dpl-search-help-direct-head span {
	color: #78827d;
	font: 400 8.5px/1 Arial, Helvetica, sans-serif;
}

.dpl-search-help-direct-examples {
	margin-bottom: 5px;
}

.dpl-search-help-direct-examples span {
	min-width: 0;
	height: 19px;
	padding: 0 7px;
	border-color: #aebfb4;
	background:
		linear-gradient(to bottom, #ffffff 0%, #eaf1ec 100%);
	color: #274b3d;
}

.dpl-search-help-direct p {
	margin: 0;
	color: #4f5e56;
	font: 400 9px/1.35 Arial, Helvetica, sans-serif;
}

/* Untere Status-/Arbeitszeile */
.dpl-search-help-live {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 8px;
	padding: 6px 11px 7px;
	border-top: 1px solid #d7d3c9;
	background: #f3f0e7;
}

.dpl-search-help-live strong {
	display: inline-flex;
	align-items: center;
	height: 17px;
	padding: 0 6px;
	border: 1px solid #b99b4d;
	border-radius: 3px;
	background: #fff8dc;
	color: #795c09;
	font: 700 8px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .06em;
}

.dpl-search-help-live span {
	color: #596268;
	font: 400 9px/1.25 Arial, Helvetica, sans-serif;
}


@keyframes dpl-search-card-in {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Aktuelle Suche direkt im grünen Eingabefeld löschen */
.dpl-search-clear {
	position: absolute;
	right: 82px;
	top: 7px;
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 20px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #78877f;
	font: 400 17px/18px Arial, Helvetica, sans-serif;
	cursor: pointer;
	opacity: .72;
}

.dpl-search-clear:hover,
.dpl-search-clear:focus {
	color: #bb0000;
	opacity: 1;
	outline: 0;
}

.dpl-search-clear[hidden] {
	display: none !important;
}

/* Aa — kleine, eigenständige Suchoption im Eingabefeld */
.dpl-case-toggle {
	position: absolute;
	right: 31px;
	top: 5px;
	z-index: 4;
	display: block;
	width: 23px;
	height: 26px;
	margin: 0;
	cursor: pointer;
}

.dpl-case-toggle input {
	position: absolute;
	inset: 0;
	width: 23px;
	height: 26px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.dpl-case-toggle span {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 26px;
	box-sizing: border-box;
	border: 1px solid #d0d7da;
	border-radius: 5px;
	background: linear-gradient(to bottom, #ffffff 0%, #eef1f2 100%);
	color: #657179;
	font: 600 9px/1 Arial, Helvetica, sans-serif;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
	transition: border-color .12s ease, background .12s ease, color .12s ease, box-shadow .12s ease;
}

/* Aa AUS — Hover: dezenter Hinweis auf den schaltbaren Zustand */
.dpl-case-toggle:hover input:not(:checked) + span {
	border-color: #b88f8f;
	background: linear-gradient(to bottom, #ffffff 0%, #f7eeee 100%);
	color: #8c1515;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		0 0 0 2px rgba(187, 0, 0, 0.05),
		0 1px 2px rgba(0, 0, 0, 0.07);
}

/* Aa AN */
.dpl-case-toggle input:checked + span {
	border-color: #990000;
	background: #bb0000;
	color: #ffffff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.17),
		inset 0 -1px 0 rgba(0, 0, 0, 0.15),
		0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Aa AN — Hover etwas heller / lebendiger */
.dpl-case-toggle:hover input:checked + span {
	border-color: #7f0000;
	background: #cf1010;
	color: #ffffff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.22),
		inset 0 -1px 0 rgba(0, 0, 0, 0.17),
		0 1px 3px rgba(120, 0, 0, 0.22);
}

.dpl-case-toggle input:focus-visible + span {
	outline: 2px solid rgba(0, 102, 153, 0.22);
	outline-offset: 1px;
}


/* Führender Punkt: Aa ist bewusst außer Funktion */
.dpl-case-toggle.is-disabled,
.dpl-case-toggle.is-disabled input {
	cursor: default;
}

.dpl-case-toggle.is-disabled input + span,
.dpl-case-toggle.is-disabled:hover input:not(:checked) + span {
	border-color: #d8dddf;
	background: linear-gradient(to bottom, #f5f6f6 0%, #eceeef 100%);
	color: #a7b0b5;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85);
}


/* Suchhilfe-Schalter — gleiche Mechanik und Größe wie Aa */
.dpl-search-help-toggle {
	position: absolute;
	right: 5px;
	top: 5px;
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 26px;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 1px solid #c7cfd2;
	border-radius: 5px;
	background: linear-gradient(to bottom, #ffffff 0%, #eef1f2 100%);
	color: #50626c;
	font: 700 10px/1 Arial, Helvetica, sans-serif;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		0 1px 1px rgba(0, 0, 0, 0.03);
	transition:
		border-color .12s ease,
		background .12s ease,
		color .12s ease,
		box-shadow .12s ease;
}

.dpl-search-help-toggle:hover {
	border-color: #8da9b5;
	background: linear-gradient(to bottom, #ffffff 0%, #e8f1f5 100%);
	color: #006699;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.98),
		0 0 0 2px rgba(0,102,153,.06),
		0 1px 2px rgba(0,0,0,.07);
}

.dpl-search-help-toggle:focus-visible {
	outline: 2px solid rgba(0, 102, 153, 0.22);
	outline-offset: 1px;
}

.dpl-search-help-toggle[aria-expanded="true"] {
	border-color: #8c0000;
	background: #bb0000;
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.17),
		inset 0 -1px 0 rgba(0,0,0,.15),
		0 1px 2px rgba(0,0,0,.08);
}

/* Header-Systembuttons kompakter, damit die komplette Leiste in einer Zeile bleibt. */
.dpl-head-main > .dpl-head-btn {
	width: auto;
	height: 36px;
	padding: 0 7px;
	gap: 4px;
	border-radius: 7px;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.018em;
}

/* Die drei Inhalts-Systemschalter: aktiv bewusst rot wie technische Aktivzustände. */
.dpl-system-btn.active,
.dpl-system-btn.active:hover {
	border-color: #990000;
	background: #bb0000;
	color: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.17),
		inset 0 -1px 0 rgba(0, 0, 0, 0.15),
		0 1px 2px rgba(0, 0, 0, 0.08);
}

.dpl-system-btn.active::after {
	content: "\00d7";
	margin-left: 2px;
	font-size: 11px;
	font-weight: 400;
	line-height: 1;
	color: #fff;
}

/* FILTER Ergebnisblase: Social-/Notification-Charakter, nicht wie ein Filterbadge. */
.dpl-filter-toggle {
	position: relative;
	overflow: visible;
}

/*
 * Tanzender Hinweis-Pfeil über FILTER.
 *
 * Optik und Bewegung entsprechen dem AAM-Editor-Prüfpfeil.
 * Die Klasse dpl-filter-hint-arrow wird über pricelist.js
 * abhängig vom aktuellen Filterzustand gesetzt.
 */
.dpl-filter-toggle.dpl-filter-hint-arrow:not(.filter-open)::before {
	content:"\2193";
	position:absolute;
	z-index:8;
	top:-30px;
	right:0;
	display:block;
	width:100%;
	color:#bb0000;
	font-family:"Arial Black",Arial,Helvetica,sans-serif;
	font-size:19px;
	font-weight:900;
	line-height:1;
	text-align:center;
	-webkit-text-stroke:1px #8f0000;
	text-shadow:
		0 1px 0 #ffffff,
		0 2px 3px rgba(0,0,0,.25);
	pointer-events:none;
	animation:
		dplFilterHintArrow
		.62s linear infinite;
}

@keyframes dplFilterHintArrow {
	0%,
	100% {
		transform:
			translateY(-2px)
			rotate(-5deg)
			scale(1);
	}

	25% {
		transform:
			translateY(4px)
			rotate(4deg)
			scale(1.10);
	}

	50% {
		transform:
			translateY(-1px)
			rotate(-3deg)
			scale(1.03);
	}

	75% {
		transform:
			translateY(5px)
			rotate(3deg)
			scale(1.12);
	}
}

.dpl-filter-result-bubble {
	position: absolute;
	right: -7px;
	top: -8px;
	z-index: 8;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	box-sizing: border-box;
	padding: 0 4px;
	border: 1px solid #aeb8bd;
	border-radius: 9px;
	background: #fff;
	color: #7c0a0a;
	font: 600 9px/14px Arial, Helvetica, sans-serif;
	letter-spacing: 0;
	box-shadow:
		0 1px 4px rgba(0, 0, 0, 0.17),
		inset 0 1px 0 rgba(255, 255, 255, 0.95);
	pointer-events: none;
}

.dpl-filter-result-bubble[hidden] {
	display: none !important;
}

/* ------------------------------------------------------------------------
 * Availability Select-Pill
 * ------------------------------------------------------------------------ */
.dpl-availability {
	position: relative;
	z-index: 75;
	min-width: 0;
}

.dpl-availability.is-open {
	z-index: 130;
}

.dpl-availability-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	width: 72px;
	height: 36px;
	box-sizing: border-box;
	padding: 0 7px;
	border: 1px solid #c8d0d4;
	border-radius: 7px;
	background: linear-gradient(to bottom, #ffffff 0%, #f2f4f5 100%);
	color: #344148;
	font: 600 9px/1 Arial, Helvetica, sans-serif;
	letter-spacing: 0.018em;
	white-space: nowrap;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.96),
		0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.dpl-availability-trigger:hover,
.dpl-availability.is-open .dpl-availability-trigger {
	border-color: #94a7b0;
	background: #fff;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.98),
		0 1px 4px rgba(0, 0, 0, 0.09);
}

/* Availability verwendet bewusst keine LEDs. */

.dpl-availability-chev {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 1px;
	border-left: 3px solid transparent;
	border-right: 3px solid transparent;
	border-top: 4px solid currentColor;
	opacity: .68;
	transition: transform .13s ease;
}

.dpl-availability.is-open .dpl-availability-chev {
	transform: rotate(180deg);
}

/* Availability-Auswahlkarte — gleiche physische Sprache wie die ?-Suchhilfe. */
.dpl-availability-menu {
	position: absolute;
	left: 0;
	top: calc(100% + 9px);
	z-index: 140;
	width: 304px;
	box-sizing: border-box;
	padding: 0 7px 7px;
	border: 1px solid #9da7ac;
	border-top-color: #bb0000;
	border-radius: 8px;
	background: #fbfaf5;
	color: #414b50;
	font: 400 10px/1.35 Arial, Helvetica, sans-serif;
	box-shadow:
		0 10px 26px rgba(0, 0, 0, 0.22),
		0 2px 6px rgba(0, 0, 0, 0.10),
		inset 0 1px 0 rgba(255, 255, 255, 0.98);
	overflow: visible;
	animation: dpl-search-card-in .15s ease-out;
}

/* Äußerer Rand des echten Zeigers zum Trigger. */
.dpl-availability-menu::before {
	content: "";
	position: absolute;
	left: 28px;
	top: -8px;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 8px solid #bb0000;
}

/* Innere Kartenfläche des Zeigers. */
.dpl-availability-menu::after {
	content: "";
	position: absolute;
	left: 29px;
	top: -6px;
	width: 0;
	height: 0;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 7px solid #fffdf9;
}

.dpl-availability-menu[hidden] {
	display: none !important;
}

.dpl-availability-menu-head {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 39px;
	box-sizing: border-box;
	margin: 0 -7px 6px;
	padding: 6px 7px 6px 11px;
	border-bottom: 1px solid #d9d5ca;
	border-radius: 7px 7px 0 0;
	background:
		linear-gradient(to bottom, #fffdf9 0%, #f2eee5 100%);
}

.dpl-availability-menu-head-copy {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	gap: 3px;
}

.dpl-availability-menu-head strong {
	color: #a40000;
	font: 700 10px/1 Arial, Helvetica, sans-serif;
	letter-spacing: .055em;
}

.dpl-availability-menu-head-copy > span {
	color: #747b7e;
	font: 400 9px/1.15 Arial, Helvetica, sans-serif;
}

.dpl-availability-options {
	display: block;
}

.dpl-availability-option {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
	margin: 6px 0 0;
	padding: 8px 9px 8px;
	border: 1px solid #dad6cb;
	border-radius: 6px;
	background:
		linear-gradient(to bottom, #fffefa 0%, #f6f3ea 100%);
	color: #414b50;
	text-align: left;
	font-family: Arial, Helvetica, sans-serif;
	cursor: pointer;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.96),
		0 1px 2px rgba(0, 0, 0, 0.045);
	transition:
		border-color .12s ease,
		background .12s ease,
		box-shadow .12s ease,
		transform .12s ease;
}

.dpl-availability-option:hover,
.dpl-availability-option:focus-visible {
	border-color: #b9b3a5;
	background:
		linear-gradient(to bottom, #ffffff 0%, #faf6eb 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.98),
		0 2px 5px rgba(0, 0, 0, 0.075);
	outline: 0;
}

.dpl-availability-option:active {
	transform: translateY(1px);
}

.dpl-availability-option.is-selected {
	border-color: #c5a94e;
	background:
		linear-gradient(to bottom, #fff9dc 0%, #f3e5aa 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.78),
		inset 0 -1px 0 rgba(121, 91, 16, 0.09),
		0 1px 2px rgba(0, 0, 0, 0.055);
}

.dpl-availability-option-title {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #31383b;
	font: 700 10px/1.15 Arial, Helvetica, sans-serif;
	letter-spacing: .035em;
}

.dpl-availability-option-pick {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 13px;
	height: 13px;
	box-sizing: border-box;
	border: 1px solid #aaa9a1;
	border-radius: 2px;
	background:
		linear-gradient(to bottom, #ffffff 0%, #eeece5 100%);
	box-shadow:
		inset 0 1px 1px rgba(0, 0, 0, 0.055);
}

.dpl-availability-option.is-selected .dpl-availability-option-pick {
	border-color: #92742e;
	background:
		linear-gradient(to bottom, #ffe98c 0%, #dfbd4e 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.55),
		inset 0 -1px 1px rgba(92, 66, 9, 0.12);
}

.dpl-availability-option.is-selected .dpl-availability-option-pick::after {
	content: "\2713";
	color: #56420f;
	font: 700 9px/11px Arial, Helvetica, sans-serif;
}

.dpl-availability-option-text {
	display: block;
	margin: 4px 0 0 20px;
	color: #60686b;
	font: 400 9.5px/1.35 Arial, Helvetica, sans-serif;
}

.dpl-availability-option-count {
	display: block;
	margin: 4px 0 0 20px;
	color: #8a8d89;
	font: 400 8px/1.2 Arial, Helvetica, sans-serif;
}

/* Preis-Preset zeigt den gleichen klaren Löschzustand wie andere Filterpillen. */
.dpl-price-presets button.is-active::after {
	content: "\00d7";
	margin-left: 6px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1;
	color: var(--dpl-blue, #006699);
}

/* FILTER LÖSCHEN muss als echte, aber dezente Aktion erkennbar sein. */
.dpl-linkbtn.dpl-filter-clear {
	height: 25px;
	box-sizing: border-box;
	padding: 0 9px;
	border: 1px solid #d2d9dc;
	border-radius: 6px;
	background: linear-gradient(to bottom, #fff 0%, #f3f5f6 100%);
	color: #5a676e;
	font-size: 8px;
	font-weight: 600;
	letter-spacing: .025em;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.dpl-linkbtn.dpl-filter-clear:hover,
.dpl-linkbtn.dpl-filter-clear:focus {
	border-color: #990000;
	background: #bb0000;
	color: #fff;
	outline: 0;
}

/* mobile / sehr schmale Viewports */
@media (max-width: 480px) {
	.dpl-head-main {
		grid-template-columns: minmax(0, 1fr) 84px;
		gap: 6px;
		align-items: start;
	}

	.dpl-search-control {
		grid-column: 1 / 2;
	}

	.dpl-availability {
		grid-column: 2 / 3;
	}

	.dpl-availability-trigger {
		width: 100%;
	}

	.dpl-head-main > .dpl-head-btn {
		width: 100%;
	}

	.dpl-system-btn,
	.dpl-filter-toggle {
		grid-column: auto;
	}

	.dpl-availability-menu {
		left: auto;
		right: 0;
		width: min(304px, calc(100vw - 24px));
	}
}
/* Preis-/Setup-Labels oberhalb der aktiven Tabellenzeile */
.dpl-main-tr.dpl-focus-active .domain_price,
.dpl-main-tr.dpl-focus-active .domain_setup {
	position: relative;
	overflow: visible;
}

.dpl-main-tr.dpl-focus-active .domain_price::before,
.dpl-main-tr.dpl-focus-active .domain_setup::before {
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	margin-bottom: 4px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	color: #111;
	text-align: center;
	pointer-events: none;
	z-index: 5;
}

.dpl-main-tr.dpl-focus-active .domain_price::before {
	content: "PREIS \20AC";
}

.dpl-main-tr.dpl-focus-active .domain_setup::before {
	content: "SETUP \20AC";
}

/* Warenkorb-Button ausblenden, wenn Expand geöffnet ist */
.dpl-main-tr.dpl-focus-active .dpl-td-buy {
	visibility: hidden;
}