/* Theme tokens. html[data-theme=dark|light] wird per Inline-Skript gesetzt. */
html { overflow-x: clip; }
:root, html[data-theme="dark"] {
	color-scheme: dark;
	--whc-bg: #12161e;
	--whc-fg: #e8eef5;
	--whc-fg-strong: #ffffff;
	--whc-fg-soft: #d5dbe4;
	--whc-muted: #8b95a7;
	--whc-caption: #c5cdd8;
	--whc-surface: #1c2330;
	--whc-surface-2: #161c27;
	--whc-input: #232a38;
	--whc-hover: #2d3545;
	--whc-row-hover: #232a38;
	--whc-border: #2a3344;
	--whc-border-strong: #3b4558;
	--whc-link: #7ec8ff;
	--whc-link-hover: #9ec8ea;
	--whc-accent: #4ea3ea;
	--whc-accent-bg: #16426e;
	--whc-accent-border: #2d6aa8;
	--whc-icon-hover: #1a3048;
	--whc-ok-bg: #163528;
	--whc-ok-fg: #cfeedd;
	--whc-ok-border: #2d6b45;
	--whc-ok-bright: #3dcc7a;
	--whc-ok-text: #d5f0e0;
	--whc-off-bg: #4a221c;
	--whc-off-fg: #ffd4ce;
	--whc-off-border: #ef7a6e;
	--whc-hint: #9aa7b8;
	--whc-chip: #171d28;
	--whc-txt: #c5d8ea;
	--whc-warn-bg: #3a3218;
	--whc-warn-border: #c9a227;
	--whc-warn-fg: #ffe9a8;
	--whc-warn-ico: #e8c04a;
	--whc-meter-ok: #2d6b45;
	--whc-meter-warn: #d4b84a;
	--whc-meter-high: #e08a3a;
	--whc-meter-alert: #ef7a6e;
	--whc-shadow-nav: 0 10px 22px rgba(0,0,0,0.4);
	--whc-shadow-card: 0 18px 40px rgba(0,0,0,0.45);
	--whc-qr-bg: #ffffff;
}
html[data-theme="light"] {
	color-scheme: light;
	--whc-bg: #f4f6fa;
	--whc-fg: #1a2230;
	--whc-fg-strong: #0f141c;
	--whc-fg-soft: #2a3444;
	--whc-muted: #5b6678;
	--whc-caption: #3d4758;
	--whc-surface: #ffffff;
	--whc-surface-2: #eef1f6;
	--whc-input: #ffffff;
	--whc-hover: #e8edf5;
	--whc-row-hover: #d4e2f4;
	--whc-border: #d5dce8;
	--whc-border-strong: #c0c9d8;
	--whc-link: #1565c0;
	--whc-link-hover: #0d47a1;
	--whc-accent: #1565c0;
	--whc-accent-bg: #e3f0fb;
	--whc-accent-border: #2d6aa8;
	--whc-icon-hover: #d6e8f8;
	--whc-ok-bg: #e7f6ee;
	--whc-ok-fg: #145c38;
	--whc-ok-border: #2d6b45;
	--whc-ok-bright: #1e9e58;
	--whc-ok-text: #145c38;
	--whc-off-bg: #fdecea;
	--whc-off-fg: #8b2e24;
	--whc-off-border: #ef7a6e;
	--whc-hint: #5b6678;
	--whc-chip: #eef1f6;
	--whc-txt: #1a4a73;
	--whc-warn-bg: #fff6d8;
	--whc-warn-border: #c9a227;
	--whc-warn-fg: #6a5208;
	--whc-warn-ico: #c9a227;
	--whc-meter-ok: #2d6b45;
	--whc-meter-warn: #c9a227;
	--whc-meter-high: #e08a3a;
	--whc-meter-alert: #ef7a6e;
	--whc-shadow-nav: 0 10px 22px rgba(20,30,50,0.08);
	--whc-shadow-card: 0 18px 40px rgba(20,30,50,0.12);
	--whc-qr-bg: #ffffff;
}

body {
	overflow-x: clip;
	background-color: var(--whc-bg) !important;
	color: var(--whc-fg) !important;
	color-scheme: inherit;
}
body p, body h1, body h2, body h3, body h4, body h5, body label, body li, body td, body th, body a {
	color: var(--whc-fg) !important;
}
.grid-container {
	width: 100%;
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	background-color: var(--whc-bg);
}
@media print, screen and (min-width: 40em) {
	.grid-container { width: 90%; }
}

.app-nav-wrap {
	height: calc(3.9rem + env(safe-area-inset-top, 0px));
	min-height: calc(3.9rem + env(safe-area-inset-top, 0px));
}
@media print, screen and (min-width: 40em) {
	.app-nav-wrap { height: calc(4.3rem + env(safe-area-inset-top, 0px)); min-height: calc(4.3rem + env(safe-area-inset-top, 0px)); }
}
.app-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 80;
	margin: 0;
	padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 0.45rem 0.4rem;
	background: var(--whc-bg);
	border-bottom: 1px solid var(--whc-border);
	box-shadow: var(--whc-shadow-nav);
}
@media print, screen and (min-width: 40em) {
	.app-nav { left: 5%; right: 5%; }
}
.app-nav.is-collapsed #main-tabs { display: none; }
.app-nav-head {
	display: flex;
	align-items: stretch;
	gap: 0.4rem;
	margin: 0 0 0.4rem;
}
.app-nav-toggle {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0.76rem 0.75rem;
	min-height: 3.03rem;
	border: 1px solid var(--whc-border);
	border-radius: 12px;
	background: linear-gradient(165deg, var(--whc-surface) 0%, var(--whc-bg) 70%);
	color: var(--whc-fg);
	cursor: pointer;
}
.app-nav-toggle-current-ico { width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem; margin-right: 0.4rem; }
.app-nav-toggle-current-ico svg { width: 100%; height: 100%; display: block; }
.app-nav-toggle-current { flex: 1; text-align: left; font-size: 0.95rem; font-weight: 700; }
.app-nav-toggle-icon {
	width: 0.55rem; height: 0.55rem;
	border-right: 2px solid var(--whc-muted);
	border-bottom: 2px solid var(--whc-muted);
	transform: rotate(45deg);
	margin: 0 0.15rem 0.2rem;
}
.app-nav.is-collapsed .app-nav-toggle-icon { transform: rotate(-135deg); }
.app-theme-qs {
	position: relative;
	display: flex; align-items: stretch;
	flex: 0 0 auto;
}
.app-theme-qs-open,
.app-refresh-qs {
	display: flex; align-items: center; justify-content: center;
	flex: 0 0 auto; margin: 0; padding: 0;
	width: 2.5rem; min-width: 2.5rem; min-height: 3.03rem;
	border: 1px solid var(--whc-border-strong);
	background: var(--whc-surface-2);
	color: var(--whc-fg-soft);
	border-radius: 12px; cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}
.app-theme-qs-open:hover, .app-theme-qs-open:focus,
.app-refresh-qs:hover, .app-refresh-qs:focus {
	color: var(--whc-accent); border-color: var(--whc-accent);
	background: var(--whc-icon-hover); outline: none;
}
.app-theme-icon, .app-refresh-icon {
	display: block; width: 1.3rem; height: 1.3rem;
}
.app-theme-icon svg, .app-refresh-icon svg { display: block; width: 100%; height: 100%; }
.app-theme-menu {
	position: absolute; top: calc(100% + 0.28rem); right: 0; z-index: 90;
	min-width: 13.5rem; padding: 0.28rem;
	border: 1px solid var(--whc-border); border-radius: 12px;
	background: var(--whc-surface); box-shadow: var(--whc-shadow-card);
}
.app-theme-opt {
	display: block; width: 100%; margin: 0; padding: 0.5rem 0.7rem;
	border: 0; border-radius: 8px; background: transparent;
	color: var(--whc-fg) !important; font-size: 0.82rem; font-weight: 700;
	text-align: left; cursor: pointer;
}
.app-theme-opt:hover, .app-theme-opt:focus { background: var(--whc-hover); outline: none; }
.app-theme-opt.is-on { background: var(--whc-accent-bg); color: var(--whc-fg-strong) !important; }
.app-clock-qs { display: none; }
@media print, screen and (min-width: 40em) {
	.app-theme-qs-open, .app-refresh-qs {
		width: 3.56rem; min-width: 3.56rem; min-height: 3.41rem;
	}
	.app-theme-icon, .app-refresh-icon { width: 1.55rem; height: 1.55rem; }
	.app-clock-qs {
		display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
		gap: 0.12rem; flex: 0 0 auto; margin: 0;
		padding: 0.32rem 0.85rem 0.36rem; min-height: 3.41rem; box-sizing: border-box;
		border: 1px solid var(--whc-border); border-radius: 12px;
		background: linear-gradient(165deg, var(--whc-surface) 0%, var(--whc-bg) 78%);
		white-space: nowrap; user-select: none;
	}
	.app-clock-date {
		font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
		text-transform: uppercase; color: var(--whc-muted); line-height: 1;
	}
	.app-clock-time {
		font-size: 1.18rem; font-weight: 800; font-variant-numeric: tabular-nums;
		letter-spacing: 0.06em; color: var(--whc-fg); line-height: 1;
	}
}
.app-nav-instanz {
	display: flex; align-items: center; margin: 0; flex: 0 1 11rem; min-width: 7.5rem;
}
.app-nav-instanz select {
	width: 100%; height: 3.03rem; margin: 0;
	background: var(--whc-surface-2) !important; color: var(--whc-fg) !important;
	border: 1px solid var(--whc-border); border-radius: 12px; font-weight: 700; font-size: 0.88rem;
}

#main-tabs.tabs {
	display: flex;
	flex-wrap: wrap;
	border: 0;
	background: transparent;
	margin: 0;
}
#main-tabs .tabs-title > a {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.55rem 0.7rem;
	color: var(--whc-fg-soft) !important;
	background: transparent !important;
	border-radius: 10px;
	font-size: 0.85rem;
}
#main-tabs .tabs-title > a:hover,
#main-tabs .tabs-title > a:focus {
	background: var(--whc-hover) !important;
	color: var(--whc-fg-strong) !important;
}
#main-tabs .tabs-title.is-active > a,
#main-tabs .tabs-title.is-active > a:hover,
#main-tabs .tabs-title.is-active > a:focus {
	background: var(--whc-surface) !important;
	color: var(--whc-fg-strong) !important;
	border: 1px solid var(--whc-border);
}
.app-nav-toggle:hover,
.app-nav-toggle:focus {
	background: linear-gradient(165deg, var(--whc-hover) 0%, var(--whc-surface) 70%);
	color: var(--whc-fg-strong);
}
.tab-ico { width: 1.05rem; height: 1.05rem; display: inline-flex; }
.tab-ico svg { width: 100%; height: 100%; display: block; }
.tabs-logout { margin-left: auto; }
.tabs-logout-link { color: var(--whc-off-border) !important; }
#main-tabs .tabs-logout-link:hover,
#main-tabs .tabs-logout-link:focus {
	background: var(--whc-off-bg) !important;
	color: var(--whc-off-fg) !important;
}

.tabs-content { border: 0; background: transparent !important; padding: 0.85rem 1rem 2rem; color: var(--whc-fg) !important; }
.tabs-panel { padding: 0; background: transparent !important; color: var(--whc-fg) !important; }

.whc-card {
	background: var(--whc-surface) !important;
	border: 1px solid var(--whc-border);
	border-radius: 12px;
	padding: 1rem 1.05rem 1.1rem;
	margin-bottom: 0.7rem;
	color: var(--whc-fg) !important;
}
.whc-card h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 0.55rem; color: var(--whc-fg-strong) !important; }
.whc-card p, .whc-lead { color: var(--whc-fg-soft) !important; font-size: 0.95rem; line-height: 1.45; }
.whc-tool-field { display: block; max-width: 22rem; margin: 0.85rem 0 0.35rem; }
.whc-tool-hint { font-size: 0.82rem !important; color: var(--whc-hint) !important; margin: 0 0 0.9rem !important; max-width: 40rem; }
.whc-tool-field input,
.whc-gruppen-create input,
.whc-gruppen-name input {
	width: 100%; height: 2.35rem; margin: 0.25rem 0 0; padding: 0 0.55rem;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input) !important; background-color: var(--whc-input) !important;
	color: var(--whc-fg) !important; box-shadow: none;
}
.whc-tool-field input::placeholder,
.whc-gruppen-create input::placeholder,
.whc-gruppen-name input::placeholder { color: var(--whc-muted); opacity: 1; }
.whc-home-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(19.5rem, 1fr));
	gap: 0.7rem; margin-bottom: 1.2rem;
}
.whc-home-domain {
	background: var(--whc-surface); border: 1px solid var(--whc-border); border-radius: 12px;
	padding: 0.9rem 0.95rem 1rem; color: var(--whc-fg);
}
.whc-home-domain-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.whc-home-domain h3 {
	margin: 0; font-size: 1rem; font-weight: 800; color: var(--whc-fg-strong) !important;
	word-break: break-all; line-height: 1.3;
}
.whc-home-domain-name {
	display: inline; margin: 0; padding: 0; border: 0; background: none;
	font: inherit; font-weight: 800; color: var(--whc-fg-strong) !important;
	text-align: left; cursor: pointer; word-break: break-all; line-height: 1.3;
}
.whc-home-domain-name:hover, .whc-home-domain-name:focus {
	color: var(--whc-link) !important; text-decoration: underline; outline: none;
}
.whc-home-badge {
	flex: 0 0 auto; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em;
	text-transform: uppercase; border-radius: 999px; padding: 0.18rem 0.5rem;
}
.whc-home-badge.is-on { background: var(--whc-ok-bg); color: var(--whc-ok-fg) !important; border: 1px solid var(--whc-ok-border); }
.whc-home-badge.is-off { background: var(--whc-off-bg); color: var(--whc-off-fg) !important; border: 1px solid var(--whc-off-border); }
.whc-home-meta { margin: 0.4rem 0 0.55rem; font-size: 0.78rem; color: var(--whc-muted) !important; }
.whc-home-row { display: flex; flex-wrap: wrap; gap: 0.28rem; margin-top: 0.35rem; }
.whc-home-row-lbl {
	width: 100%; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
	text-transform: uppercase; color: var(--whc-muted) !important; margin: 0.15rem 0 0.05rem;
}

.whc-crumbs {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
	margin: 0 0 0.75rem; font-size: 0.78rem;
}
.whc-crumbs:empty, .whc-crumbs[hidden] { display: none !important; margin: 0; }
.whc-crumb-sep { color: var(--whc-muted); }
.whc-crumb-link {
	color: var(--whc-fg-soft); background: var(--whc-input); border: 1px solid var(--whc-border-strong);
	border-radius: 999px; padding: 0.28rem 0.65rem; text-decoration: none;
}
.whc-crumb-link:hover { color: var(--whc-fg-strong); background: var(--whc-hover); }
.whc-crumb-now {
	color: var(--whc-fg-strong) !important; background: var(--whc-accent-bg); border: 1px solid var(--whc-accent-border);
	border-radius: 999px; padding: 0.28rem 0.65rem; font-weight: 700;
}
.whc-section[hidden] { display: none !important; }
.whc-section-toolbar { display: flex; justify-content: flex-end; margin: 0 0 0.65rem; }
.whc-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }

.whc-filters {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.55rem 0.7rem;
	margin: 0 0 0.75rem;
}
.whc-filters:empty { display: none; margin: 0; }
.whc-filter-actions {
	display: flex; align-items: center; margin-left: auto;
	min-height: 2.35rem;
}
.whc-filter-actions .whc-act { height: 2.35rem; white-space: nowrap; }
.whc-filter { display: flex; flex-direction: column; gap: 0.22rem; min-width: 9.5rem; flex: 1 1 9.5rem; }
.whc-filter span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--whc-muted); }
.whc-filter input, .whc-filter select, .whc-combo-search, .whc-combo-select {
	width: 100%; height: 2.35rem; margin: 0; padding: 0 0.55rem;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input) !important; color: var(--whc-fg) !important;
	box-shadow: none;
}
.whc-combo { display: flex; flex-direction: column; gap: 0.28rem; }
.whc-combo-select { max-height: 9rem; }

.whc-pager-bar {
	display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center; gap: 0.35rem; width: 100%;
	margin: 0.35rem 0 0.55rem;
}
.whc-pager {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
	gap: 0.28rem; margin: 0; justify-self: center;
}
.whc-pager-slot { width: 100%; }
.whc-perpage-mini {
	justify-self: end; align-self: center; display: inline-flex; align-items: center;
	gap: 0.28rem; margin: 0; height: 2rem;
	font-size: 0.68rem; font-weight: 600; color: var(--whc-muted) !important;
	text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.whc-perpage-mini select.whc-perpage {
	width: auto; min-width: 2.8rem; height: 2rem; padding: 0 0.28rem;
	font-size: 0.72rem; line-height: 2rem; margin: 0;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input) !important; color: var(--whc-fg) !important;
	box-sizing: border-box;
}
.whc-page-btn {
	min-width: 2rem; height: 2rem; padding: 0 0.45rem;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input); color: var(--whc-fg); cursor: pointer;
}
.whc-page-btn.is-active { background: var(--whc-accent-bg); border-color: var(--whc-accent); color: var(--whc-fg-strong); }
.whc-page-btn:disabled { opacity: 0.35; cursor: default; }
.whc-page-gap { color: var(--whc-muted); padding: 0 0.15rem; }
.whc-page-meta { color: var(--whc-muted); font-size: 0.78rem; margin-left: 0.35rem; }

.whc-table-wrap {
	width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
	border-top: 1px solid var(--whc-border);
	border-bottom: 1px solid var(--whc-border);
}
.whc-table {
	width: 100%; color: var(--whc-fg) !important; background: var(--whc-surface) !important;
	border-collapse: collapse; margin: 0;
}
.whc-table thead { background: var(--whc-surface-2) !important; }
.whc-table th {
	color: var(--whc-fg-soft) !important; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
	text-align: left; background: var(--whc-surface-2) !important;
}
.whc-table th.is-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.whc-table th.is-sort:hover { color: var(--whc-fg-strong) !important; }
.whc-table th.is-sort::after { content: " \2195"; opacity: 0.35; font-size: 0.85em; }
.whc-table th.is-sort.is-asc::after { content: " \2191"; opacity: 0.95; }
.whc-table th.is-sort.is-desc::after { content: " \2193"; opacity: 0.95; }
.whc-table td { color: var(--whc-fg) !important; background: var(--whc-surface) !important; }
.whc-table td, .whc-table th { padding: 0.5rem 0.45rem; border-bottom: 1px solid var(--whc-border); }
.whc-table tbody tr:last-child td { border-bottom: 1px solid var(--whc-border); }
.whc-table tbody tr:hover td { background: var(--whc-row-hover) !important; }
.whc-table td.is-link { color: var(--whc-link) !important; cursor: pointer; text-decoration: underline; }
.whc-list-status { color: var(--whc-off-fg) !important; font-size: 0.85rem; margin: 0.35rem 0; }

@media (max-width: 40em) {
	.whc-pager-bar { grid-template-columns: 1fr; }
	.whc-pager-bar-spacer, .whc-perpage-mini { display: none !important; }
	.whc-pager { justify-self: center; }
	.whc-table-wrap { border-top: 0; border-bottom: 0; }
	.whc-filter-actions { margin-left: 0; }
	.whc-table thead { display: none; }
	.whc-table, .whc-table tbody, .whc-table tr, .whc-table td { display: block; width: 100%; }
	.whc-table tr {
		background: var(--whc-surface-2) !important; border: 1px solid var(--whc-border); border-radius: 12px;
		margin: 0 0 0.55rem; padding: 0.35rem 0.55rem;
	}
	.whc-table tbody tr:hover { background: var(--whc-row-hover) !important; }
	.whc-table td {
		display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem;
		border-bottom: 1px solid var(--whc-border); padding: 0.4rem 0;
		color: var(--whc-fg) !important; background: transparent !important;
	}
	.whc-table td:last-child { border-bottom: 0; }
	.whc-table td::before {
		content: attr(data-label);
		color: var(--whc-muted); font-size: 0.7rem; font-weight: 700;
		text-transform: uppercase; letter-spacing: 0.04em; flex: 0 0 38%;
	}
	.app-nav { padding-bottom: 0.35rem; }
	#main-tabs .tabs-title { flex: 1 1 46%; }
	#main-tabs .tabs-title > a { width: 100%; }
	.tabs-logout { flex: 1 1 100%; margin-left: 0; }
}

.whc-footer {
	margin-top: 1.2rem;
	padding: 0.75rem 1rem 1.05rem;
	text-align: center;
	font-size: 0.78rem;
	color: var(--whc-muted) !important;
	border-top: 1px solid var(--whc-border);
}
.whc-footer a { color: var(--whc-link) !important; text-decoration: none; }
.whc-footer a:hover, .whc-footer a:focus { text-decoration: underline; color: var(--whc-link-hover) !important; }

.auth-body {
	min-height: 100vh; background: var(--whc-bg); color: var(--whc-fg);
	color-scheme: inherit;
	display: flex; flex-direction: column;
}
.auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.auth-body .whc-footer { margin-top: auto; }
.auth-card {
	width: 100%; max-width: 30rem;
	background: linear-gradient(165deg, var(--whc-surface) 0%, var(--whc-bg) 70%);
	border: 1px solid var(--whc-border);
	border-radius: 16px;
	padding: 1.3rem 1.2rem 1.4rem;
	box-shadow: var(--whc-shadow-card);
}
.auth-card h1 { font-size: 1.15rem; font-weight: 800; margin: 0 0 0.25rem; }
.auth-sub { color: var(--whc-muted); font-size: 0.85rem; margin: 0 0 0.9rem; }
.auth-card label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--whc-muted); }
.auth-card input,
.auth-card input[type="text"],
.auth-card input[type="password"],
.auth-card input[type="email"],
.auth-card select {
	width: 100%; max-width: 19.6rem; height: 2.55rem; margin: 0.2rem 0 0.7rem; padding: 0 0.7rem;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input) !important; color: var(--whc-fg) !important;
	-webkit-text-fill-color: var(--whc-fg) !important; caret-color: var(--whc-fg);
	box-shadow: none;
}
.auth-card input:focus,
.auth-card select:focus {
	background: var(--whc-hover) !important; color: var(--whc-fg-strong) !important;
	-webkit-text-fill-color: var(--whc-fg-strong) !important; border-color: var(--whc-accent); outline: none;
}
.auth-card a { color: var(--whc-link) !important; }
.auth-btn {
	width: 100%; max-width: 19.6rem; height: 2.7rem; border: 1px solid var(--whc-ok-border); border-radius: 8px;
	background: var(--whc-ok-bg); color: var(--whc-fg); font-weight: 800; cursor: pointer;
}
.auth-btn-sec {
	margin-top: 0.45rem; border-color: var(--whc-border-strong); background: var(--whc-input);
}
.auth-error {
	background: var(--whc-off-bg); border: 1px solid var(--whc-off-border); color: var(--whc-off-fg);
	border-radius: 8px; padding: 0.5rem 0.65rem; margin: 0 0 0.7rem; font-size: 0.85rem;
}
.auth-hint {
	background: var(--whc-ok-bg); border: 1px solid var(--whc-ok-border); color: var(--whc-ok-text);
	border-radius: 8px; padding: 0.5rem 0.65rem; margin: 0 0 0.7rem; font-size: 0.85rem;
}
.whc-totp-row {
	display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.9rem 1.1rem; margin: 0.55rem 0 0.35rem;
}
.whc-totp-qr-wrap { background: var(--whc-qr-bg); padding: 0.55rem; border-radius: 10px; flex: 0 0 auto; }
#account_totp_qr, #account_totp_qr img, #account_totp_qr canvas, #account_totp_qr table {
	display: block; width: 164px; height: 164px;
}
.whc-totp-text { flex: 1 1 16rem; min-width: 0; }
.whc-totp-text label { display: block; margin-top: 0.35rem; }
.whc-totp-text input[type="text"] {
	width: 100%; height: 2.3rem; margin: 0.15rem 0 0; padding: 0 0.55rem;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input) !important; color: var(--whc-fg) !important;
}
.auth-error-warn { display: flex; align-items: flex-start; gap: 0.55rem; }
.auth-error-ico { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; color: var(--whc-off-border); }
.auth-error-ico svg { display: block; width: 100%; height: 100%; }
.auth-wartung {
	display: flex; align-items: flex-start; gap: 0.55rem;
	background: var(--whc-warn-bg); border: 1px solid var(--whc-warn-border); color: var(--whc-warn-fg) !important;
	border-radius: 8px; padding: 0.65rem 0.75rem; margin: 0 0 0.85rem; font-size: 0.88rem; line-height: 1.35;
}
.auth-wartung strong { color: var(--whc-warn-fg) !important; }
.auth-wartung .auth-error-ico { color: var(--whc-warn-ico); }
.whc-toggle {
	position: relative; display: inline-flex; align-items: center;
	width: 2.6rem; height: 1.45rem; margin: 0; cursor: pointer;
}
.whc-toggle.has-text { width: auto; gap: 0.4rem; height: 1.55rem; }
.whc-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.whc-toggle-ui {
	display: block; width: 2.6rem; height: 1.45rem; flex: 0 0 2.6rem; border-radius: 999px;
	background: var(--whc-off-bg); border: 1px solid var(--whc-off-border); position: relative;
}
.whc-toggle-ui::after {
	content: ''; position: absolute; top: 0.12rem; left: 0.14rem;
	width: 1.05rem; height: 1.05rem; border-radius: 50%;
	background: var(--whc-off-fg);
}
.whc-toggle input:checked + .whc-toggle-ui {
	background: var(--whc-ok-bg); border-color: var(--whc-ok-bright);
}
.whc-toggle input:checked + .whc-toggle-ui::after {
	left: auto; right: 0.14rem; background: var(--whc-ok-fg);
}
.whc-toggle-text {
	font-size: 0.78rem; font-weight: 800; letter-spacing: 0; text-transform: none;
	color: var(--whc-off-fg) !important; min-width: 1.8rem;
}
.whc-toggle input:checked ~ .whc-toggle-text { color: var(--whc-ok-fg) !important; }
.whc-toggle.is-disabled { opacity: 0.42; cursor: not-allowed; }
.whc-toggle.is-disabled input { pointer-events: none; }
.whc-toggle-field { display: flex; flex-direction: column; gap: 0.28rem; }
.whc-toggle-caption {
	color: var(--whc-caption) !important; font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em;
}
.whc-field-hint {
	margin: 0 0 0.35rem; color: var(--whc-muted) !important; font-size: 0.78rem; line-height: 1.35;
}
.whc-field-cap {
	display: flex; align-items: center; gap: 0.4rem;
	color: var(--whc-caption) !important; font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em;
}
.whc-tip {
	display: inline-flex; align-items: center; justify-content: center;
	position: relative; z-index: 3; flex: 0 0 auto;
	width: 0.9rem; height: 0.9rem; margin: 0; padding: 0;
	border-radius: 50%; border: 1px solid var(--whc-border-strong);
	background: var(--whc-surface-2); color: var(--whc-fg) !important;
	font-size: 0.62rem; font-weight: 800; font-style: italic; line-height: 1;
	letter-spacing: 0; text-transform: none; cursor: help;
}
.whc-tip-i { pointer-events: none; text-transform: none; }
.whc-tip-pop {
	display: none; position: absolute; z-index: 8; left: 50%; bottom: calc(100% + 0.45rem);
	transform: translateX(-50%); pointer-events: none;
	width: min(22rem, 70vw); padding: 0.5rem 0.65rem;
	border: 1px solid var(--whc-border); border-radius: 8px;
	background: var(--whc-surface); color: var(--whc-fg) !important;
	font-size: 0.78rem; font-weight: 600; font-style: normal; line-height: 1.4;
	letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.whc-tip:hover .whc-tip-pop,
.whc-tip:focus .whc-tip-pop { display: block; }
#whc_ftp_check {
	margin: 0.35rem 0 0.7rem; padding: 0.45rem 0.65rem; border-radius: 6px;
	font-size: 0.82rem; line-height: 1.35; word-break: break-word;
}
#whc_ftp_check.is-ok {
	color: var(--whc-ok-fg) !important; background: var(--whc-ok-bg); border: 1px solid var(--whc-ok-border);
}
#whc_ftp_check.is-bad {
	color: var(--whc-off-fg) !important; background: var(--whc-off-bg); border: 1px solid var(--whc-off-border);
}
.whc-usage {
	display: flex; flex-direction: column; gap: 0.28rem; min-width: 9rem; cursor: pointer;
}
.whc-usage-bar {
	position: relative; height: 0.85rem; border-radius: 6px; overflow: hidden;
	background: var(--whc-surface-2); border: 1px solid var(--whc-border);
}
.whc-usage-meter {
	display: block; height: 100%; width: 0; background: var(--whc-meter-ok);
	transition: width 0.25s ease, background-color 0.25s ease;
}
.whc-usage.is-ok .whc-usage-meter { background: var(--whc-meter-ok); }
.whc-usage.is-warn .whc-usage-meter { background: var(--whc-meter-warn); }
.whc-usage.is-high .whc-usage-meter { background: var(--whc-meter-high); }
.whc-usage.is-alert .whc-usage-meter { background: var(--whc-meter-alert); }
.whc-usage.is-error .whc-usage-meter { background: transparent; }
.whc-usage-text { color: var(--whc-fg) !important; font-size: 0.78rem; line-height: 1.2; white-space: nowrap; }
.whc-usage.is-error .whc-usage-text { color: var(--whc-off-fg) !important; }
.whc-db-size.is-ok .whc-usage-meter { width: 100%; }
@media (max-width: 40em) {
	.whc-usage { min-width: 0; flex: 1; }
	.whc-usage-text { white-space: normal; }
}
.whc-actions { display: flex; flex-wrap: wrap; gap: 0.28rem; }
.whc-act {
	height: 2rem; padding: 0 0.55rem; border-radius: 8px; cursor: pointer;
	border: 1px solid var(--whc-border-strong); background: var(--whc-input); color: var(--whc-fg) !important;
	font-size: 0.78rem; font-weight: 700;
}
.whc-act.is-on { background: var(--whc-ok-bg); border-color: var(--whc-ok-border); color: var(--whc-ok-fg) !important; }
.whc-act.is-off { background: var(--whc-off-bg); border-color: var(--whc-off-border); color: var(--whc-off-fg) !important; }
.whc-act.is-danger { background: var(--whc-off-bg); border-color: var(--whc-off-border); color: var(--whc-off-fg) !important; }
.whc-act-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2rem; padding: 0;
}
.whc-act-icon svg { display: block; }
.whc-loading { display: flex; align-items: center; gap: 0.75rem; margin: 0.4rem 0; }
.whc-spinner {
	width: 1.35rem;
	height: 1.35rem;
	flex: 0 0 auto;
	border: 2px solid var(--whc-border);
	border-top-color: var(--whc-accent);
	border-radius: 50%;
	animation: whc-spin 0.8s linear infinite;
}
@keyframes whc-spin { to { transform: rotate(360deg); } }
.whc-act-icon:hover { border-color: var(--whc-accent); background: var(--whc-icon-hover); }
.whc-sort-arrows { display: inline-flex; flex-direction: column; gap: 0.12rem; vertical-align: middle; }
.whc-sort-btn {
	width: 1.55rem; height: 1.15rem; padding: 0; line-height: 1;
	border-radius: 5px; cursor: pointer;
	border: 1px solid var(--whc-border-strong); background: var(--whc-input); color: var(--whc-fg) !important;
	font-size: 0.68rem;
}
.whc-sort-btn:hover:not(:disabled) { border-color: var(--whc-accent); background: var(--whc-icon-hover); }
.whc-sort-btn:disabled { opacity: 0.28; cursor: not-allowed; }
.whc-form-grid input[readonly],
.whc-form-grid input:disabled,
.whc-form-grid select:disabled,
.whc-form-grid textarea:disabled {
	opacity: 0.85; cursor: default;
	background: var(--whc-surface-2) !important; color: var(--whc-caption) !important;
}
.whc-field-info { opacity: 0.95; }
.whc-form-grid input[readonly] { opacity: 0.75; }
.whc-form-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 0.8rem; margin: 0.6rem 0 1rem;
}
.whc-form-grid.is-stack { grid-template-columns: 1fr; }
.whc-form-grid label { color: var(--whc-caption) !important; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.whc-field-wide { grid-column: 1 / -1; }
.whc-span-row {
	grid-column: 1 / -1;
	display: grid;
	gap: 0.65rem 0.8rem;
	align-items: end;
	min-width: 0;
}
.whc-span-row > label,
.whc-span-row > .whc-toggle-field {
	display: grid;
	grid-template-rows: 1.15rem 2.35rem;
	row-gap: 0.22rem;
	align-items: stretch;
	min-width: 0;
}
.whc-span-row > .whc-toggle-field { gap: 0; }
.whc-span-row > .whc-toggle-field .whc-toggle-caption,
.whc-span-row > label {
	white-space: nowrap;
	line-height: 1.15rem;
}
.whc-span-row > .whc-toggle-field .whc-toggle-caption {
	height: 1.15rem;
}
.whc-span-row > label > input,
.whc-span-row > label > select {
	height: 2.35rem !important;
	margin: 0 !important;
	align-self: stretch;
}
.whc-span-row > .whc-toggle-field .whc-toggle.has-text {
	display: flex;
	width: 100%;
	height: 2.35rem;
	min-height: 2.35rem;
	margin: 0;
	align-items: center;
	align-self: stretch;
	box-sizing: border-box;
}
.whc-span-row > .whc-toggle-field .whc-toggle-ui {
	width: 3.5rem;
	height: 2.35rem;
	flex: 0 0 3.5rem;
}
.whc-span-row > .whc-toggle-field .whc-toggle-ui::after {
	width: 1.8rem;
	height: 1.8rem;
	top: 0.22rem;
	left: 0.22rem;
}
.whc-span-row > .whc-toggle-field .whc-toggle input:checked + .whc-toggle-ui::after {
	left: auto;
	right: 0.22rem;
}
.whc-form-grid .whc-span-row .whc-toggle input {
	position: absolute;
	display: block;
	width: 0 !important;
	height: 0 !important;
	margin: 0 !important;
	padding: 0;
	border: 0;
}
.whc-span-row > label,
.whc-db-frame .whc-form-grid > label { min-width: 0; }
.whc-db-frame {
	grid-column: 1 / -1;
	border: 1px solid var(--whc-border-strong);
	border-radius: 10px;
	padding: 0.7rem 0.85rem 0.15rem;
	margin: 0.15rem 0 0.45rem;
	background: var(--whc-surface-2);
}
.whc-db-frame-title {
	color: var(--whc-fg-strong) !important;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 0.45rem;
}
.whc-db-frame .whc-form-grid { margin: 0 0 0.45rem; }
.whc-join-row {
	grid-column: 1 / -1;
	display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.45rem 0.55rem;
	align-items: start;
}
.whc-join-sep-wrap {
	display: flex; flex-direction: column; justify-content: flex-start;
}
.whc-join-cap {
	display: block; font-size: 0.72rem; font-weight: 700; line-height: 1.2;
	letter-spacing: 0.04em; text-transform: uppercase; visibility: hidden;
	height: 0.86rem;
}
.whc-join-sep {
	display: flex; align-items: center; justify-content: center;
	height: 2.35rem; margin-top: 0.22rem;
	font-size: 1.45rem; font-weight: 800; color: var(--whc-link-hover) !important;
	line-height: 1; user-select: none;
}
.whc-join-row .select2-container { margin-top: 0.22rem !important; }
.whc-join-row .select2-container .select2-selection--single { height: 2.35rem !important; }
.whc-toggle-group {
	grid-column: 1 / -1;
	border: 1px solid var(--whc-border); border-radius: 10px;
	background: var(--whc-chip); padding: 0.7rem 0.8rem 0.8rem;
}
.whc-toggle-group-title {
	color: var(--whc-caption) !important; font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 0.55rem;
}
.whc-toggle-group-items { display: flex; flex-wrap: wrap; gap: 0.7rem 1.4rem; }
.whc-toggle-group .whc-toggle-field { margin: 0; }
.whc-form-grid input, .whc-form-grid select, .whc-form-grid textarea {
	display: block; width: 100%; height: 2.35rem; margin-top: 0.22rem;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input) !important; color: var(--whc-fg) !important;
}
.whc-form-grid textarea {
	height: auto; min-height: 8.5rem; padding: 0.5rem 0.6rem; resize: vertical;
	font-family: inherit; line-height: 1.4;
}
.whc-form-grid .select2-container { width: 100% !important; margin-top: 0.22rem; }
.whc-reveal-actions { display: flex; gap: 0.45rem; justify-content: flex-end; }
.reveal-overlay { z-index: 1005; }
.reveal {
	background: var(--whc-surface) !important; color: var(--whc-fg) !important;
	border: 1px solid var(--whc-border); border-radius: 12px;
	z-index: 1006;
}
#whc_recipients_reveal { z-index: 1012; max-width: 72rem; width: 92%; }
#whc_dns_reveal, #whc_sub_reveal {
	z-index: 1010; width: 96vw; max-width: 90rem; height: 90vh; max-height: 90vh;
	overflow-y: auto; top: 5vh; transform: none;
}
#whc_le_reveal {
	z-index: 1014; max-width: 40rem; width: 92%;
}
#whc_le_sans_wrap.is-disabled { opacity: 0.45; }
#whc_le_sans_wrap textarea {
	display: block; width: 100%; min-height: 5rem; margin-top: 0.22rem;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input) !important; color: var(--whc-fg) !important;
	padding: 0.5rem 0.6rem; resize: vertical; font-family: inherit;
}
#whc_le_cb.success { background: var(--whc-ok-bg); color: var(--whc-ok-fg) !important; border-color: var(--whc-ok-bright); }
#whc_le_cb.alert { background: var(--whc-off-bg); color: var(--whc-off-fg) !important; border-color: var(--whc-off-border); }
#whc_dns_type_help, .whc-dns-type-help {
	grid-column: 1 / -1;
	font-size: 0.82rem; color: var(--whc-link-hover) !important;
	margin: 0 0 0.35rem; line-height: 1.4;
}
.whc-soa-row {
	display: grid; gap: 0.65rem 0.8rem; margin: 0 0 0.65rem;
}
.whc-soa-row-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr); }
.whc-soa-row-2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.whc-soa-row label {
	color: var(--whc-caption) !important; font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em; min-width: 0;
}
.whc-soa-hint {
	display: inline; text-transform: none; letter-spacing: 0; font-weight: 600;
	color: var(--whc-muted) !important; font-size: 0.68rem; margin-left: 0.25rem;
}
#whc_edit_reveal.is-wide {
	width: 96vw !important; max-width: none !important;
	left: 2vw !important; right: 2vw !important; margin: 0 auto !important;
	transform: none !important; overflow-y: auto;
}
#whc_edit_reveal.is-instanz {
	box-sizing: border-box !important;
	position: relative !important;
	width: calc(100vw - 3rem) !important;
	max-width: 76rem !important;
	left: auto !important;
	right: auto !important;
	margin-left: auto !important;
	margin-right: auto !important;
	transform: none !important;
	overflow-y: auto;
}
.whc-soa-row input {
	display: block; width: 100%; height: 2.35rem; margin-top: 0.22rem;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input) !important; color: var(--whc-fg) !important;
}
.whc-pw-pair {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 0.8rem;
}
#dns_rr_table_root .whc-table-wrap { overflow-x: hidden; }
#dns_rr_table_root .whc-table { table-layout: fixed; width: 100%; }
#dns_rr_table_root th:nth-child(1), #dns_rr_table_root td:nth-child(1) { width: 18%; }
#dns_rr_table_root th:nth-child(2), #dns_rr_table_root td:nth-child(2) { width: 4.6rem; }
#dns_rr_table_root th:nth-child(4), #dns_rr_table_root td:nth-child(4) { width: 4.6rem; }
#dns_rr_table_root th:nth-child(5), #dns_rr_table_root td:nth-child(5) { width: 11.5rem; }
#dns_rr_table_root td { overflow: hidden; vertical-align: top; }
.whc-clip {
	display: block; max-width: 100%; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap;
	cursor: pointer; color: var(--whc-link) !important;
}
.whc-clip.is-open {
	white-space: pre-wrap; word-break: break-word; overflow: visible;
	color: var(--whc-fg) !important;
}
.whc-rdata {
	display: flex; flex-wrap: wrap; gap: 0.28rem; align-items: center;
	min-width: 0; max-width: 100%; cursor: pointer;
}
.whc-rdata-chip {
	display: inline-flex; align-items: baseline; gap: 0.28rem; min-width: 0; max-width: 100%;
	background: var(--whc-chip); border: 1px solid var(--whc-border); border-radius: 8px;
	padding: 0.12rem 0.45rem;
}
.whc-rdata-k {
	font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--whc-muted) !important; flex: 0 0 auto;
}
.whc-rdata-v {
	color: var(--whc-fg) !important; font-size: 0.82rem; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem;
}
.whc-rdata-v.is-host, .whc-rdata-v.is-ip {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var(--whc-link) !important;
}
.whc-rdata.is-open .whc-rdata-v, .whc-rdata.is-open .whc-clip {
	white-space: pre-wrap; word-break: break-word; overflow: visible; text-overflow: unset; max-width: none;
}
.whc-rdata.is-raw .whc-rdata-v { color: var(--whc-off-fg) !important; }
.whc-rdata.is-txt { width: 100%; }
.whc-rdata.is-txt .whc-clip { color: var(--whc-txt) !important; }
.whc-rdata-box { grid-column: 1 / -1; }
.whc-rdata-toolbar { display: flex; justify-content: flex-end; margin: 0 0 0.4rem; }
.whc-rdata-box.is-raw .whc-rdata-fields { display: none !important; }
.whc-rdata-box:not(.is-raw) .whc-rdata-raw-label { display: none !important; }
.whc-rdata-fields {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0.65rem 0.8rem;
}
.whc-rdata-fields .whc-field-wide { grid-column: 1 / -1; }
.whc-rdata-fields label {
	color: var(--whc-caption) !important; font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em; min-width: 0;
}
.whc-rdata-fields input, .whc-rdata-fields select, .whc-rdata-fields textarea,
.whc-rdata-raw {
	display: block; width: 100%; height: 2.35rem; margin-top: 0.22rem;
	border: 1px solid var(--whc-border-strong); border-radius: 8px;
	background: var(--whc-input) !important; color: var(--whc-fg) !important;
}
.whc-rdata-fields textarea, .whc-rdata-raw {
	height: auto; min-height: 7rem; padding: 0.5rem 0.6rem; resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; line-height: 1.4;
}
.whc-rdata-raw { margin-top: 0.35rem; }
.whc-rdata-raw-label {
	display: block; margin-top: 0.2rem;
	color: var(--whc-caption) !important; font-size: 0.72rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: 0.04em;
}
#whc_edit_reveal { z-index: 1035; }
#whc_edit_reveal.is-db {
	width: min(56rem, calc(100vw - 1.5rem));
	max-width: calc(100vw - 1.5rem);
}
#whc_confirm_reveal { z-index: 1045; }
#whc_db_tables_reveal {
	z-index: 1016 !important;
	width: min(72rem, calc(100vw - 1.5rem));
	max-width: calc(100vw - 1.5rem);
}
#whc_mail_folders_reveal {
	box-sizing: border-box;
	width: min(72rem, calc(100vw - 1.5rem));
	max-width: calc(100vw - 1.5rem);
}
#whc_mail_folders_body {
	max-height: min(70vh, 40rem);
	overflow: auto;
}
#whc_mail_folders_body .whc-table td:nth-child(2),
#whc_mail_folders_body .whc-table th:nth-child(2) {
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.reveal-overlay:has(#whc_db_tables_reveal) { z-index: 1015 !important; }
#whc_db_tables_sum { margin: 0 0 0.7rem; color: var(--whc-fg) !important; font-weight: 700; }
#whc_db_tables_body { max-height: min(60vh, 28rem); overflow: auto; }
#whc_db_tables_body .whc-table td:nth-child(n+2),
#whc_db_tables_body .whc-table th:nth-child(n+2) {
	text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.select2-container--open { z-index: 1060 !important; }
.select2-dropdown { z-index: 1060 !important; }
.reveal .select2-container--open { z-index: 1060 !important; }
.reveal h5 { color: var(--whc-fg-strong) !important; font-weight: 800; }
.reveal .close-button { color: var(--whc-fg) !important; }
.reveal .callout { color: var(--whc-fg) !important; }
.reveal .callout.success { background: var(--whc-ok-bg); border: 1px solid var(--whc-ok-border); color: var(--whc-ok-fg) !important; }
.reveal .callout.alert { background: var(--whc-off-bg); border: 1px solid var(--whc-off-border); color: var(--whc-off-fg) !important; }
.whc-notice {
	position: fixed; z-index: 1100; display: none;
	top: calc(4.5rem + env(safe-area-inset-top, 0px));
	left: 50%; transform: translateX(-50%);
	width: min(56rem, calc(100% - 1.5rem));
	align-items: flex-start; gap: 0.6rem;
	padding: 0.7rem 0.7rem 0.7rem 0.9rem;
	border-radius: 12px; border: 1px solid var(--whc-border-strong);
	background: var(--whc-surface); color: var(--whc-fg);
	box-shadow: var(--whc-shadow-card);
}
.whc-notice.is-on { display: flex; }
.whc-notice p { margin: 0; flex: 1; color: inherit !important; font-weight: 700; line-height: 1.35; }
.whc-notice.is-ok { background: var(--whc-ok-bg); border-color: var(--whc-ok-border); color: var(--whc-ok-fg); }
.whc-notice.is-err { background: var(--whc-off-bg); border-color: var(--whc-off-border); color: var(--whc-off-fg); }
.whc-notice.is-progress { background: var(--whc-warn-bg); border-color: var(--whc-warn-border); color: var(--whc-warn-fg); }
.whc-notice-x {
	flex: 0 0 auto; width: 1.8rem; height: 1.8rem; margin: 0; padding: 0;
	border: 0; border-radius: 8px; background: transparent; color: inherit;
	font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.whc-notice-x:hover, .whc-notice-x:focus { background: var(--whc-hover); }
@media print, screen and (min-width: 40em) {
	.whc-notice { top: calc(5rem + env(safe-area-inset-top, 0px)); }
}
@media (max-width: 40em) {
	.whc-form-grid { grid-template-columns: 1fr; }
	.whc-join-row { grid-template-columns: 1fr auto 1fr; }
	.whc-soa-row-1, .whc-soa-row-2, .whc-pw-pair, .whc-rdata-fields { grid-template-columns: 1fr; }
	#dns_rr_table_root .whc-table { table-layout: auto; }
	#dns_rr_table_root th:nth-child(1), #dns_rr_table_root td:nth-child(1),
	#dns_rr_table_root th:nth-child(2), #dns_rr_table_root td:nth-child(2),
	#dns_rr_table_root th:nth-child(4), #dns_rr_table_root td:nth-child(4),
	#dns_rr_table_root th:nth-child(5), #dns_rr_table_root td:nth-child(5) { width: auto; }
}

code { color: var(--whc-link) !important; }

/* Select2: ein Feld, folgt dem Theme */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
	height: 2.35rem !important;
	background: var(--whc-input) !important;
	border: 1px solid var(--whc-border-strong) !important;
	border-radius: 8px !important;
	color: var(--whc-fg) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--whc-fg) !important;
	line-height: 2.3rem !important;
	padding-left: 0.55rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--whc-caption) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 2.3rem !important;
}
.select2-dropdown {
	background: var(--whc-surface) !important;
	border: 1px solid var(--whc-border-strong) !important;
	color: var(--whc-fg) !important;
}
.select2-search--dropdown .select2-search__field {
	background: var(--whc-input) !important;
	color: var(--whc-fg) !important;
	-webkit-text-fill-color: var(--whc-fg) !important;
	caret-color: var(--whc-fg);
	border: 1px solid var(--whc-border-strong) !important;
}
.select2-search--dropdown .select2-search__field::placeholder {
	color: var(--whc-muted);
	opacity: 1;
	-webkit-text-fill-color: var(--whc-muted);
}
.select2-container--default .select2-results__option {
	color: var(--whc-fg) !important;
	background: var(--whc-surface) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--whc-accent-bg) !important;
	color: var(--whc-fg-strong) !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
	background: var(--whc-input) !important;
	color: var(--whc-fg-strong) !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
	color: var(--whc-caption) !important;
}

.whc-doku h2 { margin-bottom: 0.35rem; }
.whc-doku h3 {
	font-size: 0.95rem; font-weight: 800; margin: 1.15rem 0 0.4rem;
	color: var(--whc-fg-strong) !important;
}
.whc-doku p, .whc-doku li { color: var(--whc-fg-soft) !important; }
.whc-doku .accordion {
	list-style: none; margin: 0.6rem 0 0; background: transparent;
	border: 0;
}
.whc-doku .accordion-item {
	margin: 0 0 0.7rem; border: 1px solid var(--whc-border-strong);
	border-radius: 10px; background: var(--whc-surface); overflow: hidden;
}
.whc-doku .accordion-title {
	display: block; border: 0; border-radius: 0;
	background: var(--whc-surface-2) !important;
	color: var(--whc-fg-strong) !important;
	font-size: 1rem; font-weight: 800; line-height: 1.35;
	padding: 0.9rem 2.4rem 0.9rem 1rem;
}
.whc-doku .accordion-title:hover,
.whc-doku .accordion-title:focus {
	background: var(--whc-hover) !important;
	color: var(--whc-fg-strong) !important;
}
.whc-doku .accordion-item.is-active > .accordion-title {
	background: var(--whc-accent-bg) !important;
	color: var(--whc-fg-strong) !important;
}
.whc-doku .accordion-content {
	background: var(--whc-surface) !important;
	color: var(--whc-fg) !important;
	border: 0; border-top: 1px solid var(--whc-border);
	padding: 0.35rem 1rem 1.1rem;
	height: auto !important;
}
.whc-doku .accordion-item.is-active > .accordion-content { display: block !important; }
.whc-doku code, .whc-doku .whc-path {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.84em; background: var(--whc-chip); color: var(--whc-txt) !important;
	padding: 0.05rem 0.32rem; border-radius: 4px; word-break: break-all;
}
.whc-doku-cmd {
	margin: 0.4rem 0 0.8rem; padding: 0.65rem 0.75rem; overflow-x: auto;
	background: var(--whc-chip); border: 1px solid var(--whc-border); border-radius: 8px;
}
.whc-doku-cmd code { background: transparent; padding: 0; color: var(--whc-txt) !important; }
.whc-doku-table {
	width: 100%; border-collapse: collapse; margin: 0.35rem 0 0.8rem; font-size: 0.88rem;
	background: var(--whc-surface) !important; color: var(--whc-fg) !important;
	border: 1px solid var(--whc-border);
}
.whc-doku-table thead,
.whc-doku-table tbody,
.whc-doku-table tfoot {
	background: var(--whc-surface) !important;
	border-color: var(--whc-border) !important;
	color: var(--whc-fg) !important;
}
.whc-doku-table thead,
.whc-doku-table thead tr {
	background: var(--whc-surface-2) !important;
	color: var(--whc-caption) !important;
}
.whc-doku-table tr,
.whc-doku-table tbody tr:nth-child(even),
.whc-doku-table tbody tr:nth-child(odd) {
	background: transparent !important;
	border-color: var(--whc-border);
}
.whc-doku-table th, .whc-doku-table td {
	text-align: left; vertical-align: top;
	background: var(--whc-surface) !important;
	border-bottom: 1px solid var(--whc-border);
	padding: 0.45rem 0.45rem; color: var(--whc-fg) !important;
}
.whc-doku-table tbody tr:nth-child(even) td {
	background: var(--whc-surface-2) !important;
}
.whc-doku-table th {
	background: var(--whc-surface-2) !important;
	color: var(--whc-caption) !important; font-size: 0.72rem; font-weight: 700;
	letter-spacing: 0.04em; text-transform: uppercase;
}
.whc-doku-table tbody tr:hover td { background: var(--whc-row-hover) !important; }
@media (max-width: 40em) {
	.whc-doku-table, .whc-doku-table tbody, .whc-doku-table tr,
	.whc-doku-table th, .whc-doku-table td { display: block; width: 100%; }
	.whc-doku-table thead { display: none; }
	.whc-doku-table tr,
	.whc-doku-table tbody tr:nth-child(even),
	.whc-doku-table tbody tr:nth-child(odd) {
		background: var(--whc-surface-2) !important;
		border: 1px solid var(--whc-border);
		border-radius: 12px;
		margin: 0 0 0.55rem;
		padding: 0.35rem 0.55rem;
	}
	.whc-doku-table td,
	.whc-doku-table tbody tr:nth-child(even) td {
		border-bottom: 0; padding: 0.28rem 0;
		background: transparent !important;
	}
	.whc-doku-table td::before {
		content: attr(data-label); display: block;
		font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
		text-transform: uppercase; color: var(--whc-muted);
	}
}

#whc_dmarc_reveal h6 {
	color: var(--whc-fg-strong) !important;
	font-size: 0.95rem;
	font-weight: 800;
	margin: 0.9rem 0 0.3rem;
}
#whc_dmarc_reveal .whc-table { font-size: 0.84rem; }
#whc_dmarc_reveal tr.whc-dmarc-sum { cursor: pointer; }
#whc_dmarc_reveal tr.whc-dmarc-detail td { background: var(--whc-surface-2) !important; }
#whc_dmarc_reveal .whc-dmarc-sources { margin: 0.2rem 0 0.35rem; }
#whc_dmarc_reveal .whc-dmarc-more {
	color: var(--whc-muted); font-size: 0.78rem; margin: 0.25rem 0 0;
}
.whc-dmarc-none { color: var(--whc-muted) !important; }
.whc-dmarc-fail { color: var(--whc-warn-fg) !important; font-weight: 800; }

.whc-gruppen-create { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: flex-end; margin: 0 0 0.9rem; }
.whc-gruppen-create label { display: flex; flex-direction: column; gap: 0.2rem; min-width: 10rem; flex: 1 1 10rem; color: var(--whc-fg); font-size: 0.82rem; font-weight: 700; }
.whc-gruppen-layout { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.whc-gruppen-list { flex: 1 1 15rem; display: flex; flex-direction: column; gap: 0.35rem; }
.whc-gruppe-pick {
	display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem;
	width: 100%; text-align: left; padding: 0.55rem 0.7rem;
	border: 1px solid var(--whc-border); border-radius: 8px;
	background: var(--whc-surface-2); color: var(--whc-fg); cursor: pointer;
}
.whc-gruppe-pick.is-on { border-color: var(--whc-accent-border); background: var(--whc-accent-bg); color: var(--whc-fg-strong); }
.whc-gruppe-pick small { color: var(--whc-muted); font-size: 0.75rem; }
.whc-gruppen-edit { flex: 2 1 22rem; min-width: 0; }
.whc-gruppen-name { display: block; max-width: 22rem; margin: 0 0 0.6rem; color: var(--whc-fg); font-weight: 700; }
.whc-recht-menu { margin: 0.85rem 0 0.35rem; font-size: 0.95rem; font-weight: 800; color: var(--whc-fg-strong); }
.whc-recht-acc.accordion { list-style: none; margin: 0.2rem 0 0.8rem; background: transparent; border: 0; }
.whc-recht-acc .accordion-item {
	margin: 0 0 0.55rem; border: 1px solid var(--whc-border-strong);
	border-radius: 10px; background: var(--whc-surface); overflow: hidden;
}
.whc-recht-acc .accordion-title {
	display: block; border: 0; border-radius: 0;
	background: var(--whc-surface-2) !important; color: var(--whc-fg-strong) !important;
	font-size: 1rem; font-weight: 800; line-height: 1.35;
	padding: 0.75rem 2.2rem 0.75rem 0.9rem;
}
.whc-recht-acc .accordion-title:hover,
.whc-recht-acc .accordion-title:focus {
	background: var(--whc-hover) !important; color: var(--whc-fg-strong) !important;
}
.whc-recht-acc .accordion-item.is-active > .accordion-title {
	background: var(--whc-accent-bg) !important; color: var(--whc-fg-strong) !important;
}
.whc-recht-acc .accordion-content {
	display: none; background: var(--whc-surface) !important; color: var(--whc-fg) !important;
	border: 0; border-top: 1px solid var(--whc-border);
	padding: 0.7rem 0.75rem 0.85rem; height: auto !important;
}
.whc-recht-acc .accordion-item.is-active > .accordion-content { display: block !important; }
.whc-recht-acc .accordion-title::before { color: var(--whc-muted); }
.whc-recht-grid { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.whc-recht-grid label { display: flex; align-items: center; gap: 0.4rem; color: var(--whc-fg); font-weight: 500; margin: 0; }
.whc-recht-grid input { accent-color: var(--whc-accent); width: 1rem; height: 1rem; margin: 0; }
.whc-recht-item { margin: 0 0 0.45rem; }
.whc-recht-group { margin: 0 0 0.85rem; }
.whc-recht-group.is-child { margin: 0.35rem 0 0.15rem; }
.whc-recht-line.is-menu { background: var(--whc-hover); border-radius: 8px; font-weight: 800; color: var(--whc-fg-strong); }
.whc-recht-line.is-sub { font-weight: 700; color: var(--whc-fg-strong); }
.whc-recht-group.is-off > .whc-recht-group-body { opacity: 0.4; }
.whc-recht-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; width: 100%; max-width: 22rem; margin: 0.35rem 0 0.15rem; }
.whc-recht-line {
	display: grid; grid-template-columns: 1.15rem minmax(0, 1fr); align-items: center;
	column-gap: 0.5rem; min-height: 1.75rem; margin: 0; padding: 0 0.45rem;
	font-weight: 500; color: var(--whc-fg);
}
.whc-recht-line input { width: 1rem; height: 1rem; margin: 0; justify-self: center; accent-color: var(--whc-accent); }
.whc-recht-box {
	border: 1px solid var(--whc-border-strong); border-radius: 10px;
	background: var(--whc-surface-2); padding: 0.15rem 0 0.3rem;
}
.whc-recht-line.is-head { font-weight: 800; color: var(--whc-fg-strong); border-bottom: 1px solid var(--whc-border); margin-bottom: 0.1rem; }
.whc-recht-box.is-off .whc-recht-line:not(.is-head) { opacity: 0.4; }
.whc-form-tabs, .whc-form-panel { grid-column: 1 / -1; }
.whc-form-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.75rem; }
.whc-form-tab {
	border: 1px solid var(--whc-border); border-radius: 999px; background: transparent;
	color: var(--whc-muted); padding: 0.28rem 0.75rem; font-weight: 700; cursor: pointer;
}
.whc-form-tab.is-on { color: var(--whc-fg-strong); border-color: var(--whc-accent-border); background: var(--whc-accent-bg); }
.whc-form-panel.is-off { display: none; }
.whc-recht-actions label { font-weight: 500; }
.whc-server-rechte { color: var(--whc-muted); font-size: 0.85rem; margin: 0.8rem 0; }
.whc-gruppen-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

/* Foundation setzt Textfelder auf #0a0a0a / #fefefe, auch im Fokus. */
input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], :not([type])),
textarea,
select {
	background-color: var(--whc-input);
	color: var(--whc-fg);
	caret-color: var(--whc-fg);
	border-color: var(--whc-border-strong);
}
input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"], :not([type]))::placeholder,
textarea::placeholder,
.select2-search__field::placeholder {
	color: var(--whc-muted);
	opacity: 1;
}
input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"], [type="date"], [type="time"], [type="datetime-local"], :not([type])):focus,
textarea:focus,
select:focus {
	background-color: var(--whc-input);
	color: var(--whc-fg);
	border-color: var(--whc-accent);
	box-shadow: none;
	outline: none;
}
input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"], :not([type])):disabled,
textarea:disabled,
select:disabled,
input:is([type="text"], [type="email"], [type="password"], [type="search"], [type="tel"], [type="url"], [type="number"], :not([type]))[readonly],
textarea[readonly] {
	background-color: var(--whc-surface-2);
	color: var(--whc-caption);
}
input[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}
input.whc-secret {
	-webkit-text-security: disc;
	text-security: disc;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
	-webkit-text-fill-color: var(--whc-fg) !important;
	caret-color: var(--whc-fg);
	box-shadow: 0 0 0 1000px var(--whc-input) inset !important;
	transition: background-color 9999s ease-out 0s;
}
select:not([multiple]):not(.whc-perpage) {
	padding-right: 1.6rem;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%23c5cdd8' d='M3.2 5.4 8 10.2 12.8 5.4z'/></svg>") !important;
	background-repeat: no-repeat !important;
	background-position: right 0.5rem center !important;
	background-size: 0.8rem !important;
}
html[data-theme="light"] select:not([multiple]):not(.whc-perpage) {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='%231a2230' d='M3.2 5.4 8 10.2 12.8 5.4z'/></svg>") !important;
}
select option,
select optgroup {
	background-color: var(--whc-surface);
	color: var(--whc-fg);
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
	border-color: var(--whc-fg-soft) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent var(--whc-fg-soft) transparent !important;
}