/**
 * WCL Kundenportal – Dashboard
 * Clean & minimal, hell + dunkel (folgt der Systemeinstellung).
 *
 * BRANDING: Nur die Werte im :root-Block unten anpassen (Platzhalter bis zum
 * finalen Logo/CI). Logo wird über den Filter `wcl_kp_logo` gesetzt.
 */

:root {
	/* ===================================================================
	 * MODERNIST — WEBCONLABS
	 * Flach, architektonisch, 0px Radius, kräftige 2px-Linien, Archivo.
	 * Mono-Tinte auf Papier + EIN Akzent (WEBCONLABS-Blau #2888C6).
	 * Nur die Werte hier anpassen — alle Bausteine lesen diese Tokens.
	 * =================================================================== */

	/* ---- BRANDING (Akzent = WEBCONLABS-Blau; für echtes Modernist-Rot
	 *      #ec3013 einsetzen) ---- */
	--wcl-brand: #2888c6;
	--wcl-brand-hover: #1f6ea3;
	--wcl-brand-active: #195980;
	--wcl-brand-100: #eaf4fb;   /* helle Tönung für Fills/Hover */
	--wcl-brand-800: #163f5a;   /* Text auf heller Tönung */
	--wcl-on-brand: #ffffff;
	--wcl-accent: #2888c6;

	/* ---- Schrift ---- */
	--wcl-font: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
	--wcl-font-heading-weight: 800;

	/* ---- Helles Theme (Papier + Tinte) ---- */
	--wcl-bg: #f3f2f2;
	--wcl-surface: #ffffff;
	--wcl-border: #b8b4b1;       /* architektonische Linie */
	--wcl-rule: #201e1d;         /* starke Sektions-/Tabellenkopf-Linie */
	--wcl-text: #201e1d;
	--wcl-text-muted: #6b6764;

	/* Modernist: keine Rundungen, keine Schatten. */
	--wcl-radius: 0px;
	--wcl-radius-sm: 0px;
	--wcl-shadow: none;

	/* Abstands-Skala (unverändert). */
	--wcl-space-1: 4px;
	--wcl-space-2: 8px;
	--wcl-space-3: 16px;
	--wcl-space-4: 24px;
	--wcl-space-5: 32px;
	--wcl-card-pad: 20px;
	--wcl-gap: 16px;
	--wcl-section: 24px;
	--wcl-kpi-h: 104px;

	/* ---- Ampel-/Statusfarben (funktional, bleiben erhalten) ---- */
	--wcl-ok: #1f8a5b;
	--wcl-ok-bg: #e4f3ec;
	--wcl-warn: #b9791b;
	--wcl-warn-bg: #f6ecdb;
	--wcl-danger: #cc3722;
	--wcl-danger-strong: #a12a19;
	--wcl-danger-bg: #f8e4e0;
	--wcl-info-bg: #eaf4fb;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* Modernist-Dunkel: flache Tinte-auf-Kohle-Variante, gleiche Regeln
		 * (0px Radius, keine Schatten), Akzent bleibt WEBCONLABS-Blau. */
		--wcl-bg: #1a1917;
		--wcl-surface: #232220;
		--wcl-border: #46433f;
		--wcl-rule: #f3f2f2;
		--wcl-text: #f3f2f2;
		--wcl-text-muted: #a8a4a0;
		--wcl-brand-100: #17303f;
		--wcl-brand-800: #a3d1ec;
		--wcl-shadow: none;

		--wcl-ok-bg: #163025;
		--wcl-warn-bg: #33270f;
		--wcl-danger-bg: #3a1f1a;
		--wcl-info-bg: #17303f;
	}
}

/* Vollbild-Canvas (Portal-Seiten ohne Theme-Chrome) */
body.wcl-kp-canvas {
	margin: 0;
	background: var(--wcl-bg);
	min-height: 100vh;
}

.wcl-kp-canvas__main {
	display: block;
	min-height: 100vh;
}

.wcl-kp {
	/* Volle Fensterbreite – bricht aus einem evtl. schmalen Theme-Container aus. */
	max-width: none;
	width: auto;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 24px clamp(16px, 2.5vw, 40px) 48px;
	box-sizing: border-box;
	color: var(--wcl-text);
	font-family: var(--wcl-font);
	line-height: 1.5;
}

.wcl-kp__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--wcl-border);
}

/* ---- Kopfzeile Variante C (Topbar) ---- */
.wcl-kp__topbar {
	display: flex;
	align-items: center;
	gap: 18px;
	background: var(--wcl-surface);
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	padding: 10px 18px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

.wcl-kp__topbar .wcl-kp__brand {
	padding-right: 18px;
	border-right: 1px solid var(--wcl-border);
}

.wcl-kp__topnav {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	gap: 2px;
	min-width: 0;
}

/* Tab-Navigation (Variante 3): kein Rahmen, aktive Seite mit Unterstrich */
.wcl-kp__topnav-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 10px;
	font-size: 14px;
	font-weight: 400;
	color: var(--wcl-text-muted);
	text-decoration: none;
	white-space: nowrap;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	font-family: inherit;
}

.wcl-kp__topnav-item:hover {
	color: var(--wcl-brand);
}

.wcl-kp__topnav-item.is-active {
	color: var(--wcl-brand);
	font-weight: 500;
	border-bottom-color: var(--wcl-brand);
}

.wcl-kp__topnav-item .dashicons {
	font-size: 17px;
	width: 17px;
	height: 17px;
}

/* Mega-Menü: Gruppe (Tab) + aufklappbares Panel mit Icon-Kacheln.
 * Ist ein <details>: Desktop = Hover-Dropdown (open-Zustand ohne Wirkung, da
 * das Submenu per Default display:none hat), Mobil = Akkordeon über [open]. */
.wcl-kp__nav-group {
	position: relative;
}

/* Natives Disclosure-Dreieck des <summary> ausblenden. */
.wcl-kp__nav-group-btn {
	list-style: none;
	cursor: pointer;
}
.wcl-kp__nav-group-btn::-webkit-details-marker {
	display: none;
}

.wcl-kp__nav-group.is-active > .wcl-kp__nav-group-btn {
	color: var(--wcl-brand);
	font-weight: 500;
	border-bottom-color: var(--wcl-brand);
}

.wcl-kp__caret {
	font-size: 13px !important;
	width: 13px !important;
	height: 13px !important;
	opacity: 0.6;
}

.wcl-kp__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	display: none;
	min-width: 288px;
	padding: 8px;
	margin-top: 2px;
	background: var(--wcl-surface);
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	box-shadow: none;
}

.wcl-kp__nav-group:hover > .wcl-kp__submenu,
.wcl-kp__nav-group:focus-within > .wcl-kp__submenu {
	display: block;
}

.wcl-kp__nav-tile {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 10px 11px;
	border-radius: 0;
	text-decoration: none;
}

.wcl-kp__nav-tile:hover {
	background: rgba( 40, 136, 198, 0.07 );
}

.wcl-kp__nav-tile.is-active {
	background: rgba( 40, 136, 198, 0.10 );
}

.wcl-kp__nav-tile-ico {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 0;
	background: rgba( 40, 136, 198, 0.12 );
	color: var(--wcl-brand);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wcl-kp__nav-tile-ico .dashicons {
	font-size: 19px;
	width: 19px;
	height: 19px;
}

.wcl-kp__nav-tile-tt {
	display: block;
	font-size: 14px;
	font-weight: 500;
	color: var(--wcl-text);
}

.wcl-kp__nav-tile-td {
	display: block;
	font-size: 12px;
	color: var(--wcl-text-muted);
	margin-top: 2px;
	line-height: 1.4;
}

.wcl-kp__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 0;
	background: var(--wcl-brand);
	color: var(--wcl-on-brand);
	font-size: 13px;
	font-weight: 600;
}

/* Kollabierbarer Bereich (Nav + Nutzer) */
.wcl-kp__collapse {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.wcl-kp__nav-toggle {
	display: none;
}

.wcl-kp__burger {
	display: none;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	color: var(--wcl-text-muted);
	cursor: pointer;
}

.wcl-kp__burger .dashicons {
	font-size: 24px;
	width: 24px;
	height: 24px;
}

/* Mobiles Klapp-Menü */
@media ( max-width: 860px ) {
	.wcl-kp__burger {
		display: inline-flex;
	}

	.wcl-kp__topbar .wcl-kp__brand {
		border-right: none;
		padding-right: 0;
	}

	.wcl-kp__collapse {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding-top: 10px;
	}

	.wcl-kp__nav-toggle:checked ~ .wcl-kp__collapse {
		display: flex;
	}

	.wcl-kp__topnav {
		flex-direction: column;
	}

	.wcl-kp__topnav-item {
		padding: 10px 8px;
		border-bottom: 0;
	}

	.wcl-kp__topnav-item.is-active,
	.wcl-kp__nav-group.is-active > .wcl-kp__nav-group-btn {
		border-bottom: 0;
	}

	/* Mega-Menü mobil: Akkordeon – Gruppe per Tap auf-/zuklappen. */
	.wcl-kp__nav-group {
		display: block;
	}

	.wcl-kp__nav-group-btn {
		display: flex;
		width: 100%;
	}

	.wcl-kp__submenu {
		position: static;
		display: none;
		min-width: 0;
		margin-top: 0;
		padding: 0 0 0 14px;
		border: 0;
		box-shadow: none;
		background: none;
	}

	.wcl-kp__nav-group[open] > .wcl-kp__submenu {
		display: block;
	}

	.wcl-kp__caret {
		display: inline-flex;
		margin-left: auto;
		opacity: 0.6;
		transition: transform 0.15s ease;
	}

	.wcl-kp__nav-group[open] > .wcl-kp__nav-group-btn .wcl-kp__caret {
		transform: rotate(180deg);
	}

	.wcl-kp__user {
		padding-top: 8px;
		border-top: 1px solid var(--wcl-border);
	}
}

.wcl-kp__logo {
	font-weight: 600;
	letter-spacing: 0.14em;
	font-size: 17px;
	color: var(--wcl-brand);
}

.wcl-kp__user {
	display: flex;
	align-items: center;
	gap: 14px;
	font-size: 14px;
}

.wcl-kp__bell {
	position: relative;
	display: inline-flex;
	align-items: center;
	color: var(--wcl-text-muted);
	text-decoration: none;
}

.wcl-kp__bell:hover {
	color: var(--wcl-brand);
}

.wcl-kp__bell .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.wcl-kp__activity {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wcl-kp__activity-item {
	border-top: 1px solid var(--wcl-border);
}

.wcl-kp__activity-item:first-child {
	border-top: none;
}

.wcl-kp__activity-item a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	padding: 10px 0;
	text-decoration: none;
	color: var(--wcl-text);
	font-size: 14px;
}

.wcl-kp__activity-msg {
	flex: 1;
}

.wcl-kp__activity-item a:hover .wcl-kp__activity-msg {
	color: var(--wcl-brand);
}

.wcl-kp__activity-time {
	color: var(--wcl-text-muted);
	font-size: 13px;
	white-space: nowrap;
}

.wcl-kp__activity-item--unread .wcl-kp__activity-msg {
	font-weight: 600;
}

.wcl-kp__activity-item--unread .wcl-kp__activity-msg::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 8px;
	border-radius: 0;
	background: var(--wcl-brand);
	vertical-align: middle;
}

.wcl-kp__bell-badge {
	position: absolute;
	top: -7px;
	right: -9px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	box-sizing: border-box;
	border-radius: 0;
	background: var(--wcl-brand);
	color: var(--wcl-on-brand);
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-weight: 600;
}

.wcl-kp__user-name {
	color: var(--wcl-text-muted);
}

.wcl-kp__link {
	color: var(--wcl-brand);
	text-decoration: none;
}

.wcl-kp__link:hover {
	text-decoration: underline;
}

.wcl-kp__greeting {
	margin: 28px 0 20px;
}

.wcl-kp__title {
	margin: 0;
	font-size: 26px;
	font-weight: 600;
}

.wcl-kp__subtitle {
	margin: 6px 0 0;
	color: var(--wcl-text-muted);
	font-size: 15px;
}

.wcl-kp__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--wcl-gap);
	margin-top: var(--wcl-space-2);
}

.wcl-kp__tile {
	position: relative;
	background: var(--wcl-surface);
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	padding: var(--wcl-card-pad);
	box-shadow: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.wcl-kp__tile:hover {
	border-color: var(--wcl-brand);
	transform: translateY(-2px);
}

.wcl-kp__tile-icon.dashicons {
	font-size: 28px;
	width: 28px;
	height: 28px;
	color: var(--wcl-brand);
}

.wcl-kp__tile-title {
	margin: 12px 0 4px;
	font-size: 17px;
	font-weight: 600;
}

.wcl-kp__tile-desc {
	margin: 0;
	font-size: 14px;
	color: var(--wcl-text-muted);
}

.wcl-kp__badge {
	display: inline-block;
	margin-top: 12px;
	padding: 2px 10px;
	font-size: 12px;
	border-radius: 0;
	background: var(--wcl-bg);
	border: 1px solid var(--wcl-border);
	color: var(--wcl-text-muted);
}

.wcl-kp__card {
	background: var(--wcl-surface);
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	padding: var(--wcl-card-pad);
	box-shadow: none;
	margin-bottom: var(--wcl-gap);
}

.wcl-kp__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wcl-gap);
	align-items: start;
	margin-bottom: var(--wcl-gap);
}

.wcl-kp__cols .wcl-kp__card {
	margin-bottom: 0;
}

@media (max-width: 700px) {
	.wcl-kp__cols {
		grid-template-columns: 1fr;
	}
}

.wcl-kp__card--center {
	text-align: center;
	max-width: 440px;
	margin: 40px auto;
}

.wcl-kp__btn {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 20px;
	background: var(--wcl-brand);
	color: var(--wcl-on-brand);
	border-radius: 0;
	text-decoration: none;
	font-weight: 500;
}

.wcl-kp__btn:hover {
	background: var(--wcl-brand-hover);
}

/* ---- Modul „Freigaben" ---- */

a.wcl-kp__tile {
	display: block;
	text-decoration: none;
	color: inherit;
}

.wcl-kp__tile--active {
	cursor: pointer;
}

.wcl-kp__module-head {
	display: flex;
	align-items: center;
	gap: var(--wcl-gap);
	margin: var(--wcl-section) 0 var(--wcl-gap);
}

.wcl-kp__back {
	display: inline-flex;
	align-items: center;
	color: var(--wcl-text-muted);
	text-decoration: none;
	/* Nur das Icon – der Text bleibt für Screenreader im DOM (font-size:0) und
	   wird per JS als Tooltip gespiegelt. Gilt team- und portalweit. */
	font-size: 0;
	gap: 0;
}
.wcl-kp__back .dashicons {
	font-size: 22px;
	width: 22px;
	height: 22px;
}

.wcl-kp__back:hover {
	color: var(--wcl-brand);
}

.wcl-kp__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.wcl-kp__filter {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	background: var(--wcl-surface);
	color: var(--wcl-text);
	text-decoration: none;
	font-size: 14px;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.wcl-kp__filter:hover {
	border-color: var(--wcl-brand);
}

.wcl-kp__filter.is-active {
	background: var(--wcl-brand);
	border-color: var(--wcl-brand);
	color: var(--wcl-on-brand);
}

.wcl-kp__filter-count {
	font-size: 12px;
	color: var(--wcl-text-muted);
}

.wcl-kp__filter.is-active .wcl-kp__filter-count {
	color: var(--wcl-on-brand);
}

.wcl-kp__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wcl-kp__row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--wcl-surface);
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	text-decoration: none;
	color: var(--wcl-text);
	transition: border-color 0.15s ease;
}

.wcl-kp__row:hover {
	border-color: var(--wcl-brand);
}

.wcl-kp__thumb {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 0;
	overflow: hidden;
	background: var(--wcl-bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wcl-kp__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wcl-kp__thumb .dashicons {
	color: var(--wcl-text-muted);
	font-size: 28px;
	width: 28px;
	height: 28px;
}

.wcl-kp__row-main {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.wcl-kp__row-title {
	font-weight: 500;
	font-size: 15px;
}

.wcl-kp__row-meta {
	font-size: 13px;
	color: var(--wcl-text-muted);
}

.wcl-kp__carousel {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 4px 0 12px;
	scroll-snap-type: x mandatory;
}

.wcl-kp__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	max-width: 100%;
}

.wcl-kp__slide img,
.wcl-kp__slide video {
	max-height: 460px;
	max-width: 100%;
	border-radius: 0;
	display: block;
}

.wcl-kp__caption {
	margin-top: 8px;
	font-size: 15px;
	white-space: pre-line;
}

.wcl-kp__actions {
	margin-top: 16px;
}

.wcl-kp__label {
	display: block;
	font-weight: 500;
	font-size: 14px;
	margin-bottom: 6px;
}

.wcl-kp__textarea {
	width: 100%;
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	padding: 10px 12px;
	font-size: 14px;
	background: var(--wcl-surface);
	color: var(--wcl-text);
	box-sizing: border-box;
	resize: vertical;
}

.wcl-kp__btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.wcl-kp__btn {
	cursor: pointer;
	border: 1px solid transparent;
	font-size: 14px;
}

.wcl-kp__btn--ok {
	background: var(--wcl-ok);
}

.wcl-kp__btn--ok:hover {
	background: var(--wcl-ok);
	filter: brightness(0.92);
}

.wcl-kp__btn--warn {
	background: var(--wcl-warn);
}

.wcl-kp__btn--warn:hover {
	background: var(--wcl-warn);
	filter: brightness(0.92);
}

.wcl-kp__btn--ghost {
	background: transparent;
	color: var(--wcl-text-muted);
	border-color: var(--wcl-border);
}

.wcl-kp__btn--ghost:hover {
	background: var(--wcl-bg);
	color: var(--wcl-text);
}

.wcl-kp__btn--danger {
	background: transparent;
	color: var(--wcl-danger-strong);
	border-color: var(--wcl-danger);
}

.wcl-kp__btn--danger:hover {
	background: var(--wcl-danger-bg);
	color: var(--wcl-danger-strong);
}

.wcl-kp__notice {
	margin: 12px 0;
	padding: 10px 14px;
	border-radius: 0;
	font-size: 14px;
}

.wcl-kp__notice--ok {
	background: var(--wcl-ok-bg);
	color: var(--wcl-ok);
}

.wcl-kp__notice--error {
	background: var(--wcl-danger-bg);
	color: var(--wcl-danger-strong);
}

.wcl-kp__notice--info {
	background: var(--wcl-info-bg);
	color: var(--wcl-brand-800);
}

.wcl-kp__notice--warn {
	background: var(--wcl-warn-bg);
	color: var(--wcl-warn);
}

/* Ideenpool: Anhänge */
.wcl-kp__idee-files {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 12px;
}

.wcl-kp__idee-file {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 130px;
}

.wcl-kp__idee-file img {
	width: 130px;
	height: 130px;
	object-fit: cover;
	border-radius: 0;
	border: 1px solid var(--wcl-border);
	display: block;
}

.wcl-kp__idee-dl {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--wcl-brand);
	text-decoration: none;
}

.wcl-kp__idee-dl .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.wcl-kp__idee-doc {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	background: var(--wcl-bg);
	color: var(--wcl-text);
	text-decoration: none;
	font-size: 14px;
}

/* Ideenpool: Kommentar-Verlauf */
.wcl-kp__thread {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.wcl-kp__thread-item {
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	padding: 10px 12px;
	background: var(--wcl-bg);
}

.wcl-kp__thread-item--agency {
	background: rgba(40, 136, 198, 0.06);
	border-color: rgba(40, 136, 198, 0.25);
}

.wcl-kp__thread-head {
	font-size: 12.5px;
	color: var(--wcl-text-muted);
	margin-bottom: 4px;
}

.wcl-kp__thread-tag {
	color: var(--wcl-brand);
}

.wcl-kp__thread-time {
	margin-left: 6px;
}

.wcl-kp__thread-body {
	font-size: 14px;
	color: var(--wcl-text);
	white-space: pre-wrap;
}

/* Rechnungs-Link (öffnet PDF) */
.wcl-kp__invoice-link {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: inherit;
	padding: 4px 6px;
	margin: 0 -6px;
	border-radius: 0;
}
.wcl-kp__invoice-link:hover {
	background: rgba(40, 136, 198, .07);
}
.wcl-kp__invoice-link .wcl-kp__history-text {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}
.wcl-kp__invoice-link .dashicons-pdf {
	color: var(--wcl-brand);
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* Durchsuchbare Mehrfachauswahl */
.wcl-kp__multiselect {
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	background: var(--wcl-surface);
	overflow: hidden;
}
.wcl-kp__ms-search.wcl-kp__input {
	margin: 0;
	border: 0;
	border-bottom: 1px solid var(--wcl-border);
	border-radius: 0;
}
.wcl-kp__ms-list {
	max-height: 280px;
	overflow-y: auto;
	padding: 6px;
}
.wcl-kp__ms-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 0;
	font-size: 14px;
	cursor: pointer;
}
.wcl-kp__ms-item:hover {
	background: var(--wcl-bg);
}
.wcl-kp__ms-empty {
	display: none;
	color: var(--wcl-text-muted);
	font-size: 14px;
	padding: 10px;
	margin: 0;
}
.wcl-kp__ms-foot {
	padding: 9px 12px;
	border-top: 1px solid var(--wcl-border);
	font-size: 12.5px;
	color: var(--wcl-text-muted);
	background: var(--wcl-bg);
}
.wcl-kp__ms-count {
	color: var(--wcl-brand);
}

/* Karten-Kopf mit Aktionen rechts */
.wcl-kp__card-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: var(--wcl-gap);
}
.wcl-kp__card-head .wcl-kp__title {
	margin: 0;
}

/* Projekte: Fortschrittsbalken */
.wcl-kp__progress {
	display: flex;
	align-items: center;
	gap: 12px;
}
.wcl-kp__progress .wcl-kp__bar-track {
	flex: 1;
}
.wcl-kp__progress-text {
	font-size: 13px;
	color: var(--wcl-text-muted);
	white-space: nowrap;
}

/* Detail-/Übersichts-Raster (Label über Wert) */
.wcl-kp__detail-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px 24px;
}

.wcl-kp__detail-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.wcl-kp__detail-label {
	font-size: 12px;
	color: var(--wcl-text-muted);
}

.wcl-kp__detail-value {
	font-size: 14px;
	color: var(--wcl-text);
	word-break: break-word;
}

.wcl-kp__history {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.wcl-kp__history li {
	border-left: 3px solid var(--wcl-border);
	padding-left: 12px;
}

.wcl-kp__history-meta {
	display: block;
	font-size: 12px;
	color: var(--wcl-text-muted);
}

.wcl-kp__history-text {
	display: block;
	font-size: 14px;
	margin-top: 2px;
}

/* Status-Badges */
.wcl-kp__badge--zur_freigabe {
	background: var(--wcl-info-bg);
	border-color: transparent;
	color: var(--wcl-brand-800);
}

.wcl-kp__badge--aenderung {
	background: var(--wcl-warn-bg);
	border-color: transparent;
	color: var(--wcl-warn);
}

.wcl-kp__badge--freigegeben {
	background: var(--wcl-ok-bg);
	border-color: transparent;
	color: var(--wcl-ok);
}

.wcl-kp__badge--abgelehnt {
	background: var(--wcl-danger-bg);
	border-color: transparent;
	color: var(--wcl-danger-strong);
}

.wcl-kp__badge--veroeff {
	background: var(--wcl-bg);
	border-color: var(--wcl-border);
	color: var(--wcl-text-muted);
}

.wcl-kp__badge--warn {
	background: var(--wcl-warn-bg);
	border-color: transparent;
	color: var(--wcl-warn);
}

/* Mandanten-Detail: Hauptspalte + fixierte Kennzahlen rechts. */
.wcl-kp__mandant-layout {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.wcl-kp__mandant-main {
	flex: 1 1 auto;
	min-width: 0;
}

.wcl-kp__mandant-rail {
	flex: 0 0 300px;
	width: 300px;
	position: sticky;
	top: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

@media (max-width: 900px) {
	.wcl-kp__mandant-layout {
		flex-direction: column;
	}
	.wcl-kp__mandant-rail {
		position: static;
		width: auto;
		flex-basis: auto;
		order: -1;
	}
}

/* ---- Team-Dashboard ---- */

.wcl-kp__brand {
	display: flex;
	align-items: center;
}

.wcl-kp__team-tag {
	margin-left: 8px;
	padding: 2px 8px;
	font-size: 11px;
	border-radius: 0;
	background: var(--wcl-brand);
	color: var(--wcl-on-brand);
}

.wcl-kp__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 20px 0 8px;
	border-bottom: 1px solid var(--wcl-border);
}

.wcl-kp__nav-item {
	padding: 10px 14px;
	text-decoration: none;
	color: var(--wcl-text-muted);
	font-size: 15px;
	border-bottom: 2px solid transparent;
}

.wcl-kp__nav-item:hover {
	color: var(--wcl-brand);
}

.wcl-kp__nav-item.is-active {
	color: var(--wcl-brand);
	border-bottom-color: var(--wcl-brand);
	font-weight: 500;
}

.wcl-kp__subnav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 18px 0 8px;
}

.wcl-kp__subnav-item {
	padding: 8px 16px;
	border-radius: 0;
	text-decoration: none;
	color: var(--wcl-text-muted);
	font-size: 14px;
	background: var(--wcl-surface);
	border: 1px solid var(--wcl-border);
}

.wcl-kp__subnav-item:hover {
	border-color: var(--wcl-brand);
	color: var(--wcl-brand);
}

.wcl-kp__subnav-item.is-active {
	background: var(--wcl-brand);
	border-color: var(--wcl-brand);
	color: var(--wcl-on-brand);
}

.wcl-kp__module-head .wcl-kp__btn {
	margin-left: auto;
}

.wcl-kp__form .wcl-kp__field {
	margin-bottom: 16px;
}

.wcl-kp__field-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.wcl-kp__field-row .wcl-kp__field {
	flex: 1 1 180px;
}

.wcl-kp__input,
.wcl-kp__select {
	width: 100%;
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	padding: 9px 12px;
	font-size: 14px;
	background: var(--wcl-surface);
	color: var(--wcl-text);
	box-sizing: border-box;
}

.wcl-kp__controls {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: flex-end;
	margin-bottom: 16px;
}

.wcl-kp__control {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.wcl-kp__control-label {
	font-size: 12px;
	color: var(--wcl-text-muted);
}

.wcl-kp__controls .wcl-kp__select {
	width: auto;
	min-width: 190px;
}

.wcl-kp__controls .wcl-kp__control--search .wcl-kp__input {
	min-width: 220px;
}

.wcl-kp__row-dates {
	display: block;
	font-size: 12px;
	color: var(--wcl-text-muted);
	margin-top: 3px;
}

.wcl-kp__row-dates .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
	vertical-align: -2px;
}

/* ---- Statistiken ---- */

.wcl-kp__kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--wcl-gap);
	margin: var(--wcl-space-1) 0 var(--wcl-section);
}

/* KPI-Kachel: feste Höhe + column-reverse → Label sitzt oben, Zahl unten
 * bündig. Dadurch stehen alle Zahlen einer Reihe auf einer Grundlinie und
 * die Kacheln „springen" nicht mehr, wenn ein Label zweizeilig wird. */
.wcl-kp__kpi {
	display: flex;
	flex-direction: column-reverse;
	justify-content: space-between;
	min-height: var(--wcl-kpi-h);
	background: var(--wcl-surface);
	border: 1px solid var(--wcl-border);
	border-radius: 0;
	padding: var(--wcl-card-pad);
}

.wcl-kp__kpi-val {
	display: block;
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--wcl-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.wcl-kp__kpi-label {
	display: block;
	font-size: 13px;
	line-height: 1.35;
	color: var(--wcl-text-muted);
}

.wcl-kp__bars {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: var(--wcl-space-2);
}

.wcl-kp__bar-row {
	display: flex;
	align-items: center;
	gap: 12px;
}

.wcl-kp__bar-label {
	flex: 0 0 150px;
	font-size: 13px;
	color: var(--wcl-text);
}

.wcl-kp__bar-track {
	flex: 1 1 auto;
	height: 12px;
	background: var(--wcl-bg);
	border-radius: 0;
	overflow: hidden;
}

.wcl-kp__bar-fill {
	display: block;
	height: 100%;
	border-radius: 0;
	min-width: 2px;
}

.wcl-kp__bar-val {
	flex: 0 0 auto;
	min-width: 28px;
	text-align: right;
	font-size: 13px;
	font-weight: 500;
	color: var(--wcl-text);
}

/* ---- Variante A: Mobile-Pass ----
 * Engere Ränder, kleinerer Titel und ein kompaktes 2×2-KPI-Raster. Auf dem
 * Handy würde die feste KPI-Höhe sonst tote Fläche erzeugen; hier bekommen
 * die Kacheln eine kleinere Höhe und eine kleinere Zahl, sodass auch lange
 * Euro-Beträge sicher in einer Zeile bleiben. */
@media (max-width: 600px) {
	.wcl-kp {
		padding: 16px 16px 40px;
		--wcl-card-pad: 16px;
		--wcl-gap: 12px;
		--wcl-section: 20px;
	}

	.wcl-kp__title {
		font-size: 22px;
	}

	.wcl-kp__kpis {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.wcl-kp__kpi {
		min-height: 82px;
		padding: 14px;
	}

	.wcl-kp__kpi-val {
		font-size: 18px;
	}

	.wcl-kp__kpi-label {
		font-size: 12px;
	}

	.wcl-kp__controls .wcl-kp__select,
	.wcl-kp__controls .wcl-kp__control--search .wcl-kp__input {
		width: 100%;
		min-width: 0;
	}

	.wcl-kp__control {
		flex: 1 1 100%;
	}
}

/* Fortschritts-Zeile (z. B. „Umsatzziel"): auf schmalen Screens würde der
 * lange Kennzahlen-Text (nowrap) neben dem Balken überlaufen. Hier stapeln
 * wir Balken über Text und erlauben Umbruch. Bis 768px, damit es auch auf
 * Tablets nicht klemmt. */
@media (max-width: 768px) {
	.wcl-kp__progress {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	.wcl-kp__progress .wcl-kp__bar-track {
		flex: none;
		width: 100%;
	}

	.wcl-kp__progress-text {
		white-space: normal;
	}
}

/* ---- Utility-Klassen (ersetzen wiederkehrende inline styles) ---- */
.wcl-kp__val--ok { color: var(--wcl-ok); font-weight: 500; }
.wcl-kp__val--warn { color: var(--wcl-warn); font-weight: 500; }
.wcl-kp__val--danger { color: var(--wcl-danger); font-weight: 500; }
.wcl-kp__text-ok { color: var(--wcl-ok); }
.wcl-kp__text-warn { color: var(--wcl-warn); }
.wcl-kp__text-danger { color: var(--wcl-danger); }
.wcl-kp__muted { color: var(--wcl-text-muted); }

/* Hinweistext unter Überschriften / an Karten */
.wcl-kp__hint { color: var(--wcl-text-muted); font-size: 13px; }
.wcl-kp__hint--sm { color: var(--wcl-text-muted); font-size: 12px; }
.wcl-kp__hint--lead { margin-top: -8px; }

/* Beschreibungs-/Hinweis-Absätze (ersetzen 1:1 wiederkehrende inline styles) */
.wcl-kp__note { color: var(--wcl-text-muted); font-size: 14px; margin: 0; }
.wcl-kp__note--mt0 { color: var(--wcl-text-muted); font-size: 14px; margin-top: 0; }
.wcl-kp__lead { color: var(--wcl-text-muted); margin-top: -8px; }
.wcl-kp__foot { color: var(--wcl-text-muted); font-size: 12px; margin-bottom: 0; }
.wcl-kp__foot--top { color: var(--wcl-text-muted); font-size: 12px; margin-top: 12px; }
.wcl-kp__vam { vertical-align: middle; }

/* Kleinerer Kartentitel (statt style="font-size:18px") */
.wcl-kp__title--sm { font-size: 18px; }

/* Feld-Hilfstext / kompakte Abstände */
.wcl-kp__mt-0 { margin-top: 0; }
.wcl-kp__mb-0 { margin-bottom: 0; }
.wcl-kp__mt-sm { margin-top: 8px; }
.wcl-kp__mt-md { margin-top: 14px; }
.wcl-kp__nowrap { white-space: nowrap; }
.wcl-kp__tnum { font-variant-numeric: tabular-nums; }

/* ---- Einheitlicher Leerzustand (Icon + Titel + Text + optionale Aktion) ---- */
.wcl-kp__empty {
	text-align: center;
	max-width: 460px;
	margin: 40px auto;
	padding: 32px 24px;
}
.wcl-kp__empty-ico {
	width: 56px;
	height: 56px;
	margin: 0 auto 14px;
	border-radius: 0;
	background: var(--wcl-info-bg);
	color: var(--wcl-brand);
	display: flex;
	align-items: center;
	justify-content: center;
}
.wcl-kp__empty-ico .dashicons { font-size: 28px; width: 28px; height: 28px; }
.wcl-kp__empty-title { font-size: 16px; font-weight: 600; margin: 0 0 6px; color: var(--wcl-text); }
.wcl-kp__empty-text { color: var(--wcl-text-muted); font-size: 14px; margin: 0 auto; max-width: 380px; line-height: 1.5; }
.wcl-kp__empty .wcl-kp__btn { margin-top: 16px; }

/* ---- KPI mit Trend-Zeile (Label oben · Wert · Delta darunter) ---- */
.wcl-kp__kpi--trend {
	flex-direction: column;
	justify-content: flex-start;
	gap: 4px;
}
.wcl-kp__kpi-delta {
	display: block;
	font-size: 12px;
	font-weight: 500;
}
.wcl-kp__kpi-delta--up { color: var(--wcl-ok); }
.wcl-kp__kpi-delta--down { color: var(--wcl-danger); }
.wcl-kp__kpi-delta--flat { color: var(--wcl-text-muted); }


/* ═══════════════════════════════════════════════════════════════════════
 * MODERNIST — Struktur- & Typo-Layer
 * Ergänzt die obigen (token-basierten) Regeln um das, was Tokens allein
 * nicht leisten: Archivo-Typo, bündig-linke Beschriftungen, kräftige
 * 2px-Container-Linien und quadratische, flache Flächen. Selektoren sind
 * unverändert — kein PHP-Eingriff nötig.
 * ═══════════════════════════════════════════════════════════════════════ */

/* — Typografie — */
.wcl-kp,
.wcl-kp input,
.wcl-kp select,
.wcl-kp textarea,
.wcl-kp button { font-family: var(--wcl-font); }

.wcl-kp__title,
.wcl-kp__kpi-val,
.wcl-kp__empty-title,
.wcl-kp__cal-title,
.wcl-kp__dialog-title {
	font-family: var(--wcl-font);
	font-weight: var(--wcl-font-heading-weight);
	letter-spacing: -0.01em;
}
.wcl-kp__logo {
	font-family: var(--wcl-font);
	font-weight: var(--wcl-font-heading-weight);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

/* Kicker/Sektions-Label: flush-left, versal, getrackt */
.wcl-kp__side-sec,
.wcl-kp__navsec-head,
.wcl-kp__control-label,
.wcl-kp__detail-label,
.wcl-kp__supply-head,
.wcl-kp__table th,
.wcl-kp__items-head { text-transform: uppercase; letter-spacing: 0.08em; }

/* — Buttons: bündig links, quadratisch, Archivo — */
.wcl-kp__btn {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 7px;
	text-align: left;
	font-family: var(--wcl-font);
	font-weight: 700;
	border-radius: 0;
	border: 2px solid transparent;
}
.wcl-kp__btn { background: var(--wcl-brand); }
.wcl-kp__btn:hover { background: var(--wcl-brand-hover); }
.wcl-kp__btn:active { background: var(--wcl-brand-active); }
.wcl-kp__btn--ghost {
	background: transparent;
	color: var(--wcl-text);
	border-color: var(--wcl-border);
}
.wcl-kp__btn--ghost:hover { background: var(--wcl-brand-100); border-color: var(--wcl-rule); color: var(--wcl-text); }
.wcl-kp:focus-visible,
.wcl-kp *:focus-visible { outline: 2px solid var(--wcl-brand); outline-offset: 2px; }

/* — Karten/Kacheln/KPIs: 2px-Linie, flach, quadratisch — */
.wcl-kp__card,
.wcl-kp__tile,
.wcl-kp__kpi,
.wcl-kp__row,
.wcl-kp__empty {
	border-width: 2px;
	box-shadow: none;
	background: var(--wcl-surface);
}
.wcl-kp__tile:hover { transform: none; border-color: var(--wcl-brand); }
.wcl-kp__kpi-val { font-size: 25px; }

/* — Topbar/Header/Modul-Kopf: starke Sektionslinien — */
.wcl-kp__topbar { border-width: 2px; }
.wcl-kp__header { border-bottom: 2px solid var(--wcl-rule); }
.wcl-kp__module-head { border-bottom: 0; }
.wcl-kp__nav { border-bottom-width: 2px; }

/* — Tags/Badges: quadratisch, versal, kompakt — */
.wcl-kp__badge,
.wcl-kp__team-tag {
	border-radius: 0;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 11px;
	font-weight: 600;
}

/* — Filter/Subnav/Segmente: quadratisch, aktiv = Akzentfüllung — */
.wcl-kp__filter,
.wcl-kp__subnav-item,
.wcl-kp__segbtns { border-radius: 0; }
.wcl-kp__segbtns { border-width: 2px; }
.wcl-kp__filter.is-active,
.wcl-kp__subnav-item.is-active,
.wcl-kp__segbtn.is-active { background: var(--wcl-brand); color: var(--wcl-on-brand); }

/* — Fortschritt/Bars: quadratisch, Akzentfüllung — */
.wcl-kp__bar-track { border-radius: 0; background: var(--wcl-bg); }
.wcl-kp__bar-fill { border-radius: 0; background: var(--wcl-brand); }

/* — Avatar/Glocke: quadratisch (keine Kreise) — */
.wcl-kp__avatar,
.wcl-kp__bell-badge,
.wcl-kp__prio,
.wcl-kp__log-dot,
.wcl-kp__empty-ico { border-radius: 0; }

/* — Status-Badges: quadratisch (Ampelfarben bleiben) — */
.wcl-kp__badge--zur_freigabe,
.wcl-kp__badge--aenderung,
.wcl-kp__badge--freigegeben,
.wcl-kp__badge--abgelehnt,
.wcl-kp__badge--veroeff { border-radius: 0; }

/* — Tabellenkopf: 2px-Rule; Zeilen bleiben Haarlinie (wie im Modernist-DS) — */
.wcl-kp__table th { border-bottom: 2px solid var(--wcl-rule); }

/* ── Lucide-Icons ──────────────────────────────────────────────────────
 * wcl-modernist-icons.js ersetzt jedes .dashicons-Glyph durch ein Lucide-SVG
 * und setzt die Klasse .wcl-ico. Größe/Farbe erben von .dashicons (1em). */
.wcl-kp .dashicons.wcl-ico::before { content: none; }
.wcl-kp .dashicons.wcl-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.wcl-kp .dashicons.wcl-ico > svg {
	width: 1em;
	height: 1em;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}