:root {
	--ksom-navy: #253d54;
	--ksom-navy-deep: #253D54;
	--ksom-teal: #326569;
	--ksom-teal-bright: #326569;
	--ksom-cream: #E1DDD4;
	--ksom-paper: #fff;
	--ksom-soft: #ede9e1;
	--ksom-line: #ddd8cf;
	--ksom-text: #253d54;
	--ksom-muted: rgba(37,61,84,.62);
	--ksom-header-height: var(--bb-header-height, 90px);
	--ksom-admin-offset: var(--wp-admin--admin-bar--height, 0px);
	--ksom-panel-width: 460px;
	--ksom-serif: Cinzel, Georgia, "Times New Roman", serif;
	--ksom-sans: "Yantramanav Light", "Yantramanav Regular", Yantramanav, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.ksom-active {
	/* Eine Quelle: max(konfigurierte Header-Höhe, Logo + 16px) treibt Masthead UND Content-Abstand
	   synchron — die Leiste wächst bei Bedarf mit dem Logo, ohne Desync. Identisch auch inline
	   (#ksom-logo-fit), falls WP Rocket „Used CSS" dieses Stylesheet entfernt. */
	--bb-header-height: max(var(--ksom-hdr-desktop, 74px), calc(var(--ksom-header-logo-desktop-h, 58px) + 16px));
}

@media (max-width: 767px) {
	body.ksom-active {
		--bb-header-height: max(var(--ksom-hdr-mobile, 60px), calc(var(--ksom-header-logo-mobile-h, 40px) + 16px));
	}
}

body.admin-bar.ksom-active {
	--ksom-admin-offset: 32px;
}

body.ksom-active .buddypanel,
body.ksom-active .bb-mobile-panel-wrapper,
body.ksom-active .bb-mobile-header-wrapper {
	display: none !important;
}

body.ksom-active #page,
body.ksom-active .site,
body.ksom-active #masthead,
body.ksom-active #content {
	margin-left: 0 !important;
}

body.ksom-active #masthead.site-header,
body.ksom-active #masthead.site-header--bb {
	position: fixed;
	top: var(--ksom-admin-offset);
	left: 0;
	right: 0;
	z-index: 612;
	height: var(--ksom-header-height);
	min-height: var(--ksom-header-height);
	background: var(--ksom-navy);
	box-shadow: none;
}

.ksom-header,
.ksom-header *,
.ksom-overlay,
.ksom-overlay * {
	box-sizing: border-box;
}

.ksom-header {
	height: 100%;
	color: #fff;
	font-family: var(--ksom-sans);
}

.ksom-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(100% - 64px, var(--ksom-header-content-width, 1340px));
	height: 100%;
	margin: 0 auto;
}

.ksom-brand,
.ksom-brand a {
	display: flex;
	align-items: center;
	min-width: 0;
	height: 100%;
}

.ksom-brand__image {
	display: block;
	width: auto;
	max-width: min(320px, 34vw);
	max-height: 68px;
	object-fit: contain;
}

.ksom-brand__fallback {
	color: #fff;
	font-family: var(--ksom-serif);
	font-weight: 500;
	font-size: clamp(20px, 2vw, 31px);
	letter-spacing: .025em;
}

.ksom-header__actions,
.ksom-header__utilities,
.ksom-panel__utilities {
	display: flex;
	align-items: center;
}

.ksom-header__actions {
	gap: 10px;
}

.ksom-header__utilities {
	gap: 4px;
	padding-right: 9px;
	border-right: 1px solid rgba(255,255,255,.2);
}

.ksom-quick-menu {
	position: relative;
}

.ksom-quick-menu--cart.is-empty,
.ksom-cart-link.is-empty {
	display: none;
}

/* Altes gecachtes Panel-Markup darf niemals wieder ein Warenkorb-Popover zeigen. */
.ksom-panel .ksom-quick-menu--cart .ksom-quick-menu__panel {
	display: none !important;
}

.ksom-quick-menu__panel.notification-dropdown {
	position: absolute;
	top: calc(100% + 16px);
	right: 0;
	bottom: auto;
	left: auto;
	z-index: 700;
	display: block;
	width: min(380px, calc(100vw - 24px));
	max-height: min(560px, calc(100vh - var(--ksom-header-height) - 30px));
	padding: 0;
	margin: 0;
	overflow: auto;
	border: 1px solid var(--ksom-line);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 18px 48px rgba(19,38,54,.22);
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.ksom-quick-menu__panel[hidden] {
	display: none !important;
}

.ksom-quick-menu__header {
	position: sticky;
	top: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	min-height: 58px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ksom-line);
	background: #fff;
}

.ksom-quick-menu__header h2 {
	margin: 0;
	color: var(--ksom-navy);
	font-family: var(--ksom-serif);
	font-size: 17px;
	font-weight: 500;
}

.ksom-quick-menu__header a {
	color: var(--ksom-teal);
	font-size: 13px;
	text-decoration: none;
}

.ksom-quick-menu__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ksom-quick-menu__list > li {
	position: relative;
	min-height: 74px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--ksom-line);
}

.ksom-quick-menu__list > li:last-child {
	border-bottom: 0;
}

.ksom-quick-menu__list .notification-avatar {
	float: left;
	width: 46px;
	margin-right: 11px;
}

.ksom-quick-menu__list .notification-avatar img {
	display: block;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	object-fit: cover;
}

.ksom-quick-menu__list .notification-content {
	min-width: 0;
	color: var(--ksom-text);
	font-size: 13px;
	line-height: 1.35;
}

.ksom-quick-menu__list .posted {
	display: block;
	margin-top: 4px;
	color: var(--ksom-muted);
	font-size: 12px;
}

.ksom-quick-menu__cart {
	padding: 16px;
	color: var(--ksom-text);
}

.ksom-icon-link,
.ksom-icon-button,
.ksom-menu-trigger,
.ksom-user-trigger,
.ksom-utility,
.ksom-submenu-toggle,
.ksom-overlay__scrim {
	appearance: none;
	border: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.ksom-icon-link,
.ksom-menu-trigger {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 8px;
	color: #fff;
	transition: background-color .18s ease, color .18s ease;
}

.ksom-icon-link:hover,
.ksom-icon-link:focus-visible,
.ksom-menu-trigger:hover,
.ksom-menu-trigger:focus-visible,
.ksom-user-trigger:hover,
.ksom-user-trigger:focus-visible {
	background: rgba(255,255,255,.12);
	color: #fff;
}

.ksom-menu-trigger {
	margin-left: 2px;
	background: rgba(255,255,255,.07);
}

.ksom-menu-trigger .ksom-icon {
	width: 27px;
	height: 27px;
	font-size: 25px;
}

.ksom-user-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding: 3px 6px 3px 12px;
	border-radius: 26px;
	color: #fff;
}

.ksom-user-trigger__name {
	font-family: "Yantramanav Regular", var(--ksom-sans);
	font-size: 15px;
}

.ksom-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 var(--ksom-avatar-size);
	width: var(--ksom-avatar-size);
	height: var(--ksom-avatar-size);
	overflow: hidden;
	border-radius: 50%;
	background: #e6eceb;
	color: var(--ksom-navy);
}

.ksom-avatar img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
}

.ksom-avatar.is-fallback {
	font-family: var(--ksom-serif);
	font-weight: 500;
	font-size: calc(var(--ksom-avatar-size) * .42);
}

.ksom-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	font-size: 20px;
	line-height: 1;
}

.ksom-count {
	position: absolute;
	top: 1px;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 19px;
	height: 19px;
	padding: 0 5px;
	border: 2px solid var(--ksom-navy);
	border-radius: 12px;
	background: var(--ksom-teal-bright);
	color: #fff;
	font-family: "Yantramanav Regular", var(--ksom-sans);
	font-size: 10px;
	line-height: 1;
}

.ksom-count.is-zero {
	display: none;
}

body.ksom-menu-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

.ksom-overlay {
	position: fixed;
	top: var(--ksom-admin-offset);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 999990;
	display: flex;
	justify-content: flex-end;
	height: calc(100dvh - var(--ksom-admin-offset));
	visibility: hidden;
	pointer-events: none;
	font-family: var(--ksom-sans);
	color: var(--ksom-text);
}

.ksom-overlay[hidden] {
	display: none !important;
}

.ksom-overlay.is-opening,
.ksom-overlay.is-open,
.ksom-overlay.is-closing {
	display: flex;
}

.ksom-overlay.is-open,
.ksom-overlay.is-closing {
	visibility: visible;
}

.ksom-overlay.is-open {
	pointer-events: auto;
}

.ksom-overlay__scrim {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100vh;
	padding: 0;
	background: rgba(12,28,40,.72);
	opacity: 0;
	transition: opacity .28s ease;
}

.ksom-overlay.is-open .ksom-overlay__scrim {
	opacity: 1;
}

.ksom-panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(100%, var(--ksom-panel-width, 460px));
	height: 100%;
	max-height: 100%;
	overflow: hidden;
	background: var(--ksom-cream);
	box-shadow: -18px 0 50px rgba(10, 25, 36, .24);
	transform: translate3d(100%, 0, 0);
	transition: transform .34s cubic-bezier(.22,.75,.24,1);
	outline: 0;
}

.ksom-overlay.is-open .ksom-panel {
	transform: translate3d(0, 0, 0);
}

.ksom-panel__top {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex: 0 0 auto;
	min-height: 78px;
	padding: 12px 30px;
	border-bottom: 1px solid var(--ksom-line);
	background: rgba(255,255,255,.96);
}

.ksom-panel__mark {
	display: flex;
	align-items: center;
	width: 70px;
	height: 52px;
	overflow: hidden;
	text-decoration: none;
}

.ksom-panel__mark-image {
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.ksom-panel__mark-image .ksom-brand__image {
	display: block;
	width: auto;
	max-width: none;
	height: 100%;
	max-height: none;
	object-fit: contain;
	object-position: left center;
}

.ksom-panel__mark-image .ksom-brand__fallback {
	display: block;
	color: var(--ksom-navy);
	font-size: 0;
}

.ksom-panel__mark-image .ksom-brand__fallback::first-letter {
	font-size: 30px;
}

.ksom-panel__utilities {
	justify-content: flex-end;
	gap: 2px;
}

.ksom-utility,
.ksom-icon-button,
.ksom-panel__utilities .ksom-icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 46px;
	height: 46px;
	padding: 0 10px;
	border-radius: 8px;
	color: var(--ksom-navy);
	transition: background-color .18s ease, color .18s ease;
}

.ksom-panel__utilities .ksom-utility > span:not(.ksom-count) {
	display: none;
}

.ksom-utility:hover,
.ksom-utility:focus-visible,
.ksom-icon-button:hover,
.ksom-icon-button:focus-visible,
.ksom-panel__utilities .ksom-icon-link:hover,
.ksom-panel__utilities .ksom-icon-link:focus-visible {
	background: #edf1ef;
	color: var(--ksom-teal);
}

.ksom-panel .ksom-count {
	top: 1px;
	right: 1px;
	border-color: #fff;
}

.ksom-search {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	padding: 14px 30px;
	border-bottom: 1px solid var(--ksom-line);
	background: #fff;
}

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

.ksom-search form {
	display: grid;
	grid-template-columns: auto minmax(0,1fr) auto;
	align-items: center;
	gap: 10px;
	min-height: 48px;
	padding-left: 15px;
	border: 1px solid #cfd5d4;
	border-radius: 8px;
	background: #fff;
}

.ksom-search input {
	width: 100%;
	height: 46px;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	color: var(--ksom-text);
	font-family: var(--ksom-sans);
	font-size: 17px;
	outline: 0;
}

.ksom-search button {
	align-self: stretch;
	padding: 0 20px;
	border: 0;
	border-radius: 0 7px 7px 0;
	background: var(--ksom-navy);
	color: #fff;
	font-family: "Yantramanav Regular", var(--ksom-sans);
	cursor: pointer;
}

.ksom-panel__scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.ksom-member-intro,
.ksom-guest-intro {
	padding: 28px 34px;
	border-bottom: 1px solid var(--ksom-line);
	background: #fff;
}

.ksom-member-intro {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
}

.ksom-member-intro__identity {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 0;
}

.ksom-eyebrow,
.ksom-snapshot__label {
	margin: 0 0 5px;
	color: var(--ksom-teal);
	font-family: "Yantramanav Regular", var(--ksom-sans);
	font-size: 12px;
	letter-spacing: .105em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ksom-member-intro h2,
.ksom-guest-intro h2,
.ksom-snapshot h3 {
	margin: 0;
	color: var(--ksom-navy);
	font-family: var(--ksom-serif);
	font-weight: 400;
}

.ksom-member-intro h2 {
	font-size: 25px;
	line-height: 1.2;
}

.ksom-mention {
	margin: 3px 0 0;
	color: var(--ksom-muted);
	font-size: 14px;
}

.ksom-member-intro__actions {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.ksom-member-intro__actions a {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	min-height: 44px;
	padding: 0 10px;
	border: 1px solid var(--ksom-line);
	border-radius: 7px;
	background: #fff;
	color: var(--ksom-navy);
	font-family: "Yantramanav Regular", var(--ksom-sans);
	font-size: 14px;
	white-space: nowrap;
	text-decoration: none;
}

.ksom-member-intro__actions a:hover,
.ksom-member-intro__actions a:focus-visible {
	background: #edf1ef;
	color: var(--ksom-teal);
}

.ksom-member-intro__actions .ksom-icon {
	width: 19px;
	height: 19px;
	font-size: 17px;
}

.ksom-guest-intro {
	padding-top: 34px;
	padding-bottom: 34px;
}

.ksom-guest-intro h2 {
	max-width: 530px;
	font-size: clamp(25px, 4vw, 34px);
	line-height: 1.18;
}

.ksom-guest-intro > p:not(.ksom-eyebrow) {
	max-width: 500px;
	margin: 12px 0 0;
	color: var(--ksom-muted);
	font-size: 17px;
	line-height: 1.55;
}

.ksom-guest-intro__actions {
	display: flex;
	gap: 12px;
	margin-top: 22px;
}

.ksom-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 24px;
	border: 1px solid var(--ksom-navy);
	border-radius: 7px;
	font-family: "Yantramanav Regular", var(--ksom-sans);
	font-size: 15px;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.ksom-button.is-primary {
	background: var(--ksom-navy);
	color: #fff;
}

.ksom-button.is-primary:hover,
.ksom-button.is-primary:focus-visible {
	border-color: var(--ksom-teal);
	background: var(--ksom-teal);
	color: #fff;
}

.ksom-button.is-secondary {
	background: transparent;
	color: var(--ksom-navy);
}

.ksom-button.is-secondary:hover,
.ksom-button.is-secondary:focus-visible {
	background: #edf1ef;
	color: var(--ksom-teal);
}

/* CTA-Varianten (Option ksom_guest_cta_style). A = Standard: primär gefüllt + sekundär Umriss. */
.ksom-guest-intro__actions.is-cta-d { flex-direction: column; align-items: center; }
.ksom-guest-intro__actions.is-cta-d .ksom-button { width: auto; min-width: 170px; }
/* B + D: „Konto erstellen" als dezenter Text-Link statt Button. */
.ksom-guest-intro__actions.is-cta-b .ksom-button.is-secondary,
.ksom-guest-intro__actions.is-cta-d .ksom-button.is-secondary {
	min-height: auto;
	padding: 4px 8px;
	border: 0;
	background: transparent;
	color: var(--ksom-teal);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ksom-guest-intro__actions.is-cta-b .ksom-button.is-secondary:hover,
.ksom-guest-intro__actions.is-cta-b .ksom-button.is-secondary:focus-visible,
.ksom-guest-intro__actions.is-cta-d .ksom-button.is-secondary:hover,
.ksom-guest-intro__actions.is-cta-d .ksom-button.is-secondary:focus-visible {
	background: transparent;
	color: var(--ksom-navy);
}
/* C: beide dezent (Umriss). */
.ksom-guest-intro__actions.is-cta-c .ksom-button.is-primary {
	background: transparent;
	color: var(--ksom-navy);
}
.ksom-guest-intro__actions.is-cta-c .ksom-button.is-primary:hover,
.ksom-guest-intro__actions.is-cta-c .ksom-button.is-primary:focus-visible {
	background: var(--ksom-teal);
	border-color: var(--ksom-teal);
	color: #fff;
}

.ksom-button.is-small {
	width: 100%;
	min-height: 42px;
	margin-top: 15px;
	padding: 0 16px;
}

.ksom-panel__content {
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 30px 34px 34px;
}

.ksom-panel__content.is-guest {
	display: flex;
}

.ksom-panel__content.is-member .ksom-snapshots {
	order: -1;
}

.ksom-wp-menu--mobile {
	display: none;
}

.ksom-menu-list,
.ksom-menu-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ksom-wp-menu--desktop > .ksom-menu-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
}

.ksom-wp-menu--desktop > .ksom-menu-list > li {
	position: relative;
	min-width: 0;
	padding: 18px 0;
	border-top: 1px solid var(--ksom-line);
}

.ksom-wp-menu--desktop > .ksom-menu-list > li:nth-child(-n+2) {
	border-top: 0;
	padding-top: 0;
}

.ksom-menu-list a {
	color: var(--ksom-text);
	text-decoration: none;
	transition: color .16s ease, background-color .16s ease;
}

.ksom-menu-list > li > a {
	display: flex;
	align-items: center;
	/* 44px = Touch-Zielgröße aus der Mobil-Vorgabe (24.08.2026), vorher 43. */
	min-height: 44px;
	color: var(--ksom-teal);
	font-family: var(--ksom-serif);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: .045em;
	line-height: 1.25;
	text-transform: uppercase;
}

.ksom-menu-list > li.current-menu-item > a,
.ksom-menu-list > li.current-menu-ancestor > a {
	color: var(--ksom-navy);
}

.ksom-menu-list .sub-menu a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	/* 44px = Touch-Zielgröße aus der Mobil-Vorgabe (24.08.2026), vorher 42. */
	min-height: 44px;
	padding: 6px 2px;
	border-bottom: 1px solid rgba(221,216,207,.58);
	font-size: 15px;
	line-height: 1.35;
}

.ksom-menu-list .sub-menu li:last-child > a {
	border-bottom: 0;
}

.ksom-menu-list .sub-menu a::after {
	content: "→";
	flex: 0 0 auto;
	color: var(--ksom-teal);
}

.ksom-menu-list .sub-menu a:hover,
.ksom-menu-list .sub-menu a:focus-visible,
.ksom-menu-list > li > a:hover,
.ksom-menu-list > li > a:focus-visible {
	background: rgba(50,101,105,.10);
	color: var(--ksom-teal-bright);
}

/* Aktive Seite im Menü sichtbar markieren: heller CI-Grün-Schleier, CI-grüner Balken links,
   kräftigere Schrift. Padding und negativer Margin heben sich auf, damit der Text nicht springt. */
.ksom-menu-list li.current-menu-item > a,
.ksom-menu-list a[aria-current="page"] {
	position: relative;
	border-radius: 8px;
	border-bottom-color: transparent;
	background: rgba(50,101,105,.12);
	font-family: "Yantramanav Regular", var(--ksom-sans);
}

.ksom-menu-list li.current-menu-item > a::before,
.ksom-menu-list a[aria-current="page"]::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: 0;
	width: 3px;
	border-radius: 3px;
	background: var(--ksom-teal);
}

.ksom-menu-list .sub-menu li.current-menu-item > a {
	margin-left: -8px;
	padding-left: 14px;
	color: var(--ksom-navy);
}

.ksom-menu-list .sub-menu li.current-menu-item > a .ksom-menu-icon {
	color: var(--ksom-teal);
}

/* Top-Level-Punkt, der selbst die offene Seite ist. Cinzel-Gewicht bleibt, nur Fläche und Balken. */
.ksom-menu-list > li.current-menu-item > a {
	margin-left: -8px;
	padding-left: 14px;
	font-family: var(--ksom-serif);
}

.ksom-menu-list .sub-menu .sub-menu {
	padding-left: 14px;
}

.ksom-menu-list .sub-menu .sub-menu a {
	font-size: 14px;
}

.ksom-submenu-toggle {
	display: none;
}

/* Social-Icon-Reihe unter dem eingeloggten Menü (0.13.9) — gleiche Quelle wie Footer/Header,
   theme-aware über die Panel-Tokens. */
.ksom-panel__social {
	padding: 12px 15px 6px;
}
.ksom-panel__social ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Eingeloggt + eigene Social-Reihe aktiv: die inline-Social-Menüpunkte (große Icons z. B. unter
   „Entdecken") ausblenden, damit die Icons nicht doppelt erscheinen. */
body.ksom-has-panel-social .ksom-wp-menu--single .ksom-menu-list > li.ksom-social {
	display: none !important;
}
.ksom-panel__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--ksom-line, #ddd8cf);
	color: var(--ksom-text, #253d54);
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ksom-panel__social a:hover,
.ksom-panel__social a:focus-visible {
	background: var(--ksom-teal, #326569);
	border-color: var(--ksom-teal, #326569);
	color: #fff;
}
.ksom-panel__social i {
	font-size: 16px;
	line-height: 1;
}

/* Eine gemeinsame, mobile Accordion-Ansicht auf allen Bildschirmgrößen. */
.ksom-wp-menu--single > .ksom-menu-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.ksom-wp-menu--single > .ksom-menu-list > li {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	border-top: 1px solid var(--ksom-line);
	background: #fff;
}

.ksom-wp-menu--single > .ksom-menu-list > li:first-child {
	border-top: 0;
}

.ksom-wp-menu--single .ksom-menu-list > li > a {
	min-height: 58px;
	padding: 8px 56px 8px 15px;
	/* Gewicht über die Familienwahl steuern, damit kein synthetischer Schnitt entsteht. */
	font-family: "Yantramanav Regular", var(--ksom-sans);
	font-size: 15px;
	letter-spacing: .01em;
	text-transform: none;
}

.ksom-wp-menu--single .ksom-menu-list > li:not(.menu-item-has-children) > a {
	padding-right: 15px;
}

.ksom-wp-menu--single .sub-menu {
	display: none;
	padding: 0 14px 12px 30px;
	background: #faf8f4;
}

.ksom-wp-menu--single li.is-ksom-open > .sub-menu {
	display: block;
}

.ksom-wp-menu--single .sub-menu a {
	min-height: 48px;
	font-size: 15px;
}

.ksom-menu-label {
	display: inline-flex;
	align-items: center;
	min-width: 0;
	gap: 12px;
}

.ksom-menu-icon {
	display: inline-flex;
	flex: 0 0 22px;
	align-items: center;
	justify-content: center;
	width: 22px;
	color: var(--ksom-teal);
	font-size: 17px;
}

.ksom-menu-label__text {
	min-width: 0;
}

.ksom-wp-menu--single .ksom-submenu-toggle {
	position: absolute;
	top: 7px;
	right: 5px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	border-radius: 7px;
	color: var(--ksom-navy);
}

.ksom-wp-menu--single .ksom-submenu-toggle::before,
.ksom-wp-menu--single .ksom-submenu-toggle::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 1.5px;
	background: currentColor;
	transition: transform .18s ease;
}

.ksom-wp-menu--single .ksom-submenu-toggle::before {
	transform: translateX(-3px) rotate(45deg);
}

.ksom-wp-menu--single .ksom-submenu-toggle::after {
	transform: translateX(3px) rotate(-45deg);
}

.ksom-wp-menu--single li.is-ksom-open > .ksom-submenu-toggle::before {
	transform: translateX(-3px) rotate(-45deg);
}

.ksom-wp-menu--single li.is-ksom-open > .ksom-submenu-toggle::after {
	transform: translateX(3px) rotate(45deg);
}

/* Offener/aktiver Toggle bekommt (auch durch Theme-Leak) grünen Grund → Chevron muss weiß sein.
   Wir besitzen den Zustand selbst: CI-Grün + currentColor weiß, statt dunklem, kaum sichtbarem Chevron. */
.ksom-panel .ksom-wp-menu--single li.is-ksom-open > .ksom-submenu-toggle,
.ksom-panel .ksom-wp-menu--single .ksom-submenu-toggle:hover,
.ksom-panel .ksom-wp-menu--single .ksom-submenu-toggle:focus,
.ksom-panel .ksom-wp-menu--single .ksom-submenu-toggle:focus-visible {
	background: #326569 !important;
	color: #fff !important;
}

/* Mit `ksom-social` markierte Custom Links bilden die Social-Leiste. */
.ksom-wp-menu--single > .ksom-menu-list > li.ksom-social {
	flex: 0 0 64px;
	margin-top: 20px;
	border-top: 0;
	background: transparent;
}

.ksom-wp-menu--single > .ksom-menu-list > li.ksom-social > a {
	justify-content: center;
	min-height: 52px;
	padding: 0;
	border-radius: 8px;
}

.ksom-wp-menu--single > .ksom-menu-list > li.ksom-social > a:hover,
.ksom-wp-menu--single > .ksom-menu-list > li.ksom-social > a:focus-visible {
	background: #edf1ef;
}

.ksom-wp-menu--single li.ksom-social .ksom-menu-label {
	justify-content: center;
	gap: 0;
}

.ksom-wp-menu--single li.ksom-social .ksom-menu-icon {
	flex-basis: 28px;
	width: 28px;
	color: var(--ksom-navy);
	font-size: 25px;
}

.ksom-wp-menu--single li.ksom-social .ksom-menu-label__text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ksom-wp-menu--single li.ksom-social > .ksom-submenu-toggle {
	display: none;
}

.ksom-menu-notice {
	margin: 0 0 16px;
	padding: 12px 14px;
	border-left: 3px solid var(--ksom-teal);
	background: #fff;
	font-size: 14px;
}

html.ksom-dark-mode .ksom-menu-notice {
	background: var(--ksom-paper);
	color: var(--ksom-text);
}

.ksom-snapshots {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ksom-snapshot {
	padding: 20px;
	border: 1px solid #e4dfd7;
	border-radius: 9px;
	background: #fff;
	box-shadow: 0 7px 22px rgba(37,61,84,.07);
}

.ksom-snapshot.is-quiet {
	background: #f3efe8;
	box-shadow: none;
}

.ksom-snapshot h3 {
	font-size: 18px;
	line-height: 1.35;
}

.ksom-snapshot p:not(.ksom-snapshot__label) {
	margin: 7px 0 0;
	color: var(--ksom-muted);
	font-size: 14px;
	line-height: 1.45;
}

.ksom-snapshot__date {
	color: var(--ksom-text) !important;
	font-family: "Yantramanav Regular", var(--ksom-sans);
}

.ksom-progress {
	height: 6px;
	margin-top: 14px;
	overflow: hidden;
	border-radius: 4px;
	background: #e3e7e6;
}

.ksom-progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--ksom-teal-bright);
}

.ksom-snapshot__meta {
	display: flex;
	justify-content: flex-end;
	margin-top: 5px;
	color: var(--ksom-muted);
	font-size: 12px;
}

.ksom-text-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 12px;
	color: var(--ksom-teal);
	font-family: "Yantramanav Regular", var(--ksom-sans);
	font-size: 14px;
	text-decoration: none;
}

.ksom-text-link .ksom-icon {
	width: 17px;
	height: 17px;
	font-size: 13px;
}

.ksom-panel__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 34px 30px;
	border-top: 1px solid var(--ksom-line);
	background: #fff;
}

.ksom-panel__footer a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	color: var(--ksom-text);
	font-size: 14px;
	text-decoration: none;
}

.ksom-panel__footer a:hover,
.ksom-panel__footer a:focus-visible {
	color: var(--ksom-teal);
}

/* Ausgeloggter Fuß (Hilfe · Impressum · Datenschutz) mittig statt space-between. */
.ksom-panel__footer.is-guest {
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 22px;
}

.ksom-panel__footer .ksom-icon {
	width: 20px;
	height: 20px;
	font-size: 18px;
}

/* --- „Hilfe" mit Rundgang der aktuellen Seite (0.25.0) -------------------
   Nur vorhanden, wenn das Cockpit für diese Seite einen Rundgang meldet.
   Sonst rendert PHP weiterhin den einfachen Link, und nichts hiervon greift. */

.ksom-help {
	position: relative;
}

/* Dreieck des Browsers weg, der Knopf soll wie die Nachbarlinks aussehen. */
.ksom-help > summary {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	color: var(--ksom-text);
	font-size: 14px;
	list-style: none;
	cursor: pointer;
}

.ksom-help > summary::-webkit-details-marker {
	display: none;
}

.ksom-help > summary:hover,
.ksom-help > summary:focus-visible,
.ksom-help[open] > summary {
	color: var(--ksom-teal);
}

/* Klappt nach oben auf, weil der Fuß am unteren Rand sitzt. */
.ksom-help__menu {
	position: absolute;
	bottom: calc(100% + 10px);
	left: 0;
	z-index: 20;
	min-width: 272px;
	padding: 6px;
	border: 1px solid var(--ksom-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(37, 61, 84, .16);
}

.ksom-help__item {
	display: flex;
	align-items: center;
	gap: 11px;
	width: 100%;
	min-height: 44px;
	padding: 9px 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--ksom-text);
	/* Familie explizit: `font: inherit` würde hier die große Theme-Schrift erben. */
	font-family: 'Yantramanav Light', 'Yantramanav Regular', 'Yantramanav', sans-serif;
	font-size: 14px;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

/* Im Dropdown bewusst der dezente Hover, nicht das kräftige CI-Grün der Seiten. */
.ksom-help__item:hover,
.ksom-help__item:focus-visible {
	background: rgba(50, 101, 105, .10);
	color: var(--ksom-teal);
}

.ksom-help__menu .ksom-icon {
	flex: none;
	width: 18px;
	height: 18px;
	font-size: 16px;
}

.ksom-help__text {
	display: block;
}

.ksom-help__text small {
	display: block;
	margin-top: 2px;
	color: var(--ksom-muted, #6f7c86);
	font-size: 11.5px;
}

/* Der Rundgang ist der Grund für das Menü, deshalb steht er optisch vorn. */
.ksom-help__item.is-tour {
	color: var(--ksom-navy, #253d54);
}

.ksom-help__item.is-tour + .ksom-help__item {
	margin-top: 2px;
	border-top: 1px solid #f2efe9;
	border-radius: 0 0 9px 9px;
}

.ksom-panel__footer.is-guest {
	justify-content: flex-start;
}

.ksom-panel__footer.is-guest a + a::before {
	content: "";
	display: block;
	width: 1px;
	height: 18px;
	margin-right: 12px;
	background: var(--ksom-line);
}

.ksom-overlay :focus-visible,
.ksom-header :focus-visible {
	outline: 2px solid var(--ksom-teal-bright);
	outline-offset: 2px;
}

@media (max-width: 782px) {
	body.admin-bar.ksom-active {
		--ksom-admin-offset: 46px;
	}
}

@media (max-width: 767px) {
	.ksom-header__inner {
		width: calc(100% - 28px);
	}

	.ksom-brand__image {
		max-width: min(230px, 58vw);
		max-height: 58px;
	}

	.ksom-header__utilities,
	.ksom-user-trigger__name {
		display: none;
	}

	.ksom-user-trigger {
		min-width: 44px;
		min-height: 44px;
		padding: 1px;
	}

	.ksom-user-trigger .ksom-avatar {
		--ksom-avatar-size: 40px !important;
	}

	.ksom-panel {
		width: 100%;
		max-width: none;
		box-shadow: none;
	}

	.ksom-panel__top {
		min-height: 72px;
		padding: 10px 14px;
	}

	.ksom-panel__mark {
		width: 56px;
		height: 48px;
	}

	.ksom-panel__utilities {
		gap: 0;
	}

	.ksom-utility,
	.ksom-icon-button,
	.ksom-panel__utilities .ksom-icon-link {
		min-width: 43px;
		width: 43px;
		height: 43px;
		padding: 0;
	}

	.ksom-panel__utilities .ksom-icon {
		width: 23px;
		height: 23px;
		font-size: 21px;
	}

	.ksom-panel .ksom-count {
		top: -1px;
		right: -1px;
	}

	.ksom-search {
		padding: 12px 16px;
	}

	.ksom-search form {
		grid-template-columns: auto minmax(0,1fr);
	}

	.ksom-search button {
		grid-column: 1 / -1;
		min-height: 44px;
		margin: 0 -1px -1px -16px;
		border-radius: 0 0 7px 7px;
	}

	.ksom-member-intro,
	.ksom-guest-intro {
		padding: 24px 20px;
	}

	.ksom-member-intro {
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
	}

	.ksom-member-intro__identity {
		gap: 14px;
	}

	.ksom-member-intro__identity .ksom-avatar {
		--ksom-avatar-size: 66px !important;
	}

	.ksom-member-intro h2 {
		font-size: 23px;
	}

	.ksom-member-intro__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		width: 100%;
	}

	.ksom-member-intro__actions a {
		justify-content: center;
		border: 1px solid var(--ksom-line);
		background: var(--ksom-cream);
	}

	.ksom-guest-intro h2 {
		font-size: 27px;
	}

	.ksom-guest-intro > p:not(.ksom-eyebrow) {
		font-size: 16px;
	}

	.ksom-guest-intro__actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.ksom-button {
		padding: 0 12px;
	}

	.ksom-panel__content {
		display: flex;
		flex-direction: column;
		gap: 22px;
		padding: 22px 18px 28px;
	}

	.ksom-panel__content.is-member .ksom-snapshots {
		order: -1;
	}

	.ksom-wp-menu--desktop {
		display: none;
	}

	.ksom-wp-menu--mobile {
		display: block;
	}

	.ksom-wp-menu--mobile > .ksom-menu-list {
		display: block;
	}

	.ksom-wp-menu--mobile > .ksom-menu-list > li {
		position: relative;
		border-top: 1px solid var(--ksom-line);
		background: #fff;
	}

	.ksom-wp-menu--mobile > .ksom-menu-list > li:first-child {
		border-top: 0;
	}

	.ksom-wp-menu--mobile .ksom-menu-list > li > a {
		min-height: 58px;
		padding: 8px 56px 8px 15px;
		font-size: 15px;
	}

	.ksom-wp-menu--mobile .ksom-menu-list > li:not(.menu-item-has-children) > a {
		padding-right: 15px;
	}

	.ksom-wp-menu--mobile .sub-menu {
		display: none;
		padding: 0 14px 12px 30px;
		background: #faf8f4;
	}

	.ksom-wp-menu--mobile li.is-ksom-open > .sub-menu {
		display: block;
	}

	.ksom-wp-menu--mobile .sub-menu a {
		min-height: 48px;
		font-size: 15px;
	}

	.ksom-submenu-toggle {
		position: absolute;
		top: 7px;
		right: 5px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		border-radius: 7px;
		color: var(--ksom-navy);
	}

	.ksom-submenu-toggle::before,
	.ksom-submenu-toggle::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 1.5px;
		background: currentColor;
		transition: transform .18s ease;
	}

	.ksom-submenu-toggle::before {
		transform: translateX(-3px) rotate(45deg);
	}

	.ksom-submenu-toggle::after {
		transform: translateX(3px) rotate(-45deg);
	}

	li.is-ksom-open > .ksom-submenu-toggle::before {
		transform: translateX(-3px) rotate(-45deg);
	}

	li.is-ksom-open > .ksom-submenu-toggle::after {
		transform: translateX(3px) rotate(45deg);
	}

	.ksom-snapshots {
		gap: 12px;
	}

	.ksom-snapshot {
		padding: 18px;
		box-shadow: none;
	}

	.ksom-panel__footer {
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 20px 20px 28px;
	}

	.ksom-panel__footer a {
		flex: 1 1 auto;
		justify-content: center;
		min-width: 120px;
		border: 1px solid var(--ksom-line);
		border-radius: 7px;
	}

	.ksom-panel__footer.is-guest a {
		min-width: auto;
		border: 0;
	}

	.ksom-panel__footer.is-guest a + a::before {
		display: none;
	}
}

/* 0.9.0: Mitglieds-Pills, eindeutige Logo-Regeln und mobile Dock-Zone. */
/* Fokus-Modus: Kurse ist Owner und setzt `ks-focus-on` am Body - serverseitig beim
   Laden, per JS sofort beim Klick. Serverseitig rendere ich die Utilities im Fokus gar
   nicht erst; diese Regeln decken den Klick-Fall ab, damit es ohne Neuladen wirkt.
   Der Umschalter selbst bleibt ausdrücklich stehen, sonst käme man nicht mehr heraus. */
/* Fokus blendet aus, entfernt aber NICHTS aus dem Dokument: Umgeschaltet wird im Browser,
   ohne Neuladen. Was serverseitig fehlt, käme beim Ausschalten nicht zurück - genau daran
   blieben Nachrichten, Benachrichtigungen und Warenkorb hängen (Frank 18.08.2026).
   Ausblendliste (Frank): Header-Utilities, Schnellzugriff, schwebender Widget-Balken.
   Sichtbar bleiben: Logo, Menü-Zugang, Umschalter, Footer (Impressum/Datenschutz sind
   gesetzlich von jeder Seite erreichbar zu halten) und das BuddyPanel. */
/* 🔴 NUR `ks-focus-on` (Zustand: Fokus ist AN), NIEMALS `ks-focus-active`. Letztere heißt
   „diese Seite ist eine Fokus-Lektion" (Kontext), wird serverseitig gesetzt und vom JS nie
   entfernt. In 0.19.2 hingen die Regeln an beiden: dadurch blieben Icons und Footer auf
   Lektionsseiten auch nach dem Ausschalten versteckt (Frank 19.08.). */
/* 🔴 IMMER BEIDE SCHREIBWEISEN, niemals nur eine:
   - `body.ks-focus-on` ist die Quelle von Kurse und wirkt SOFORT, ganz ohne JavaScript.
     Sie erreicht alles, was im `<body>` liegt: Kopfleiste, Ausklappmenü, Footer.
   - `html.ksom-focus` ist unsere Spiegelung und wird zusätzlich gebraucht, weil Dock und
     Assistent als Kinder von `<html>` VOR dem `<body>` hängen und von einer body-Regel
     grundsätzlich nicht erfasst werden.
   In 0.19.4 hatte ich die body-Variante ersetzt statt ergänzt. Ergebnis: Solange das Skript
   nicht (rechtzeitig) lief, blieb im Ausklappmenü alles stehen (Frank 19.08.). */
/* 🔴 NUR die Kopfleiste, NICHT das Ausklappmenü (Frank 19.08.2026): Nachrichten,
   Benachrichtigungen und Warenkorb sollen im geöffneten Menü **erhalten bleiben**, sie
   verschwinden im Fokus ausschließlich aus der Kopfleiste. Deshalb ist die Regel auf
   `.ksom-header__utilities` gescopt und trifft ausdrücklich nicht `.ksom-panel__tools-mid`.
   Der Fokus-Umschalter liegt bewusst außerhalb dieser Zone und bleibt dadurch stehen. */
html.ksom-focus .ksom-header__utilities,
html.ksom-focus .ksom-quick-access-rail,
body.ks-focus-on .ksom-header__utilities,
body.ks-focus-on .ksom-quick-access-rail {
	display: none !important;
}

/* Werkzeug-Balken SCHRUMPFT, statt zu verschwinden (Frank 18.08.2026): Der KI-Chat ist der
   stärkste Ablenker und geht; Barrierefreiheit, Hell/Dunkel und „nach oben" bleiben, weil sie
   beim Lesen langer Lektionen helfen statt abzulenken. Der Cookie-Knopf geht, sein Widerruf
   sitzt im Fokus-Footer. */
html.ksom-focus .ksom-dock__launcher,
html.ksom-focus .ksom-dock__action--cookies,
body.ks-focus-on .ksom-dock__launcher,
body.ks-focus-on .ksom-dock__action--cookies {
	display: none !important;
}

/* Fokus-Werkzeuge „in den Ecken" (Option `ksom_focus_tools`, Standard an): Statt der Pille
   bleiben nur zwei Symbole stehen, Barrierefreiheit unten links, „nach oben" unten rechts.
   Ohne neues Markup: Der Dock-Streifen wird auf vollen Viewport gezogen, seine Fläche
   verschwindet, und die zwei verbliebenen Symbole rücken an die Ränder. Wichtig ist das
   Aufheben von `transform`, sonst bliebe der Streifen mittig verankert. */
html.ksom-focus.ksom-focus-corners .ksom-dock,
body.ks-focus-on.ksom-focus-corners .ksom-dock {
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: none !important;
	transform: none !important;
	justify-content: space-between !important;
	gap: 0 !important;
	padding: 0 12px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

html.ksom-focus.ksom-focus-corners .ksom-dock__action--theme,
body.ks-focus-on.ksom-focus-corners .ksom-dock__action--theme {
	display: none !important;
}

/* Fokus-Footer: Der Footer verschwindet NICHT. Impressum, Datenschutz und AGB müssen von jeder
   Seite erreichbar bleiben, und dort liegt auch der Cookie-Widerruf. Ausgeblendet wird nur der
   werbliche Teil (Logo, Claim, Bewertungssiegel, Newsletter, Social); die Rechtszeile bleibt. */
html.ksom-focus .ksom-site-footer__main,
body.ks-focus-on .ksom-site-footer__main {
	display: none !important;
}

html.ksom-focus .ksom-site-footer,
body.ks-focus-on .ksom-site-footer {
	margin-top: 32px;
}

html.ksom-focus .ksom-site-footer__bottom,
body.ks-focus-on .ksom-site-footer__bottom {
	border-top: 0;
}

/* Kurse blendet im Fokus den kompletten Theme-Header aus (`.site-header`, `#masthead`).
   Mein Menü rendert aber INNERHALB dieses Containers: BuddyBoss `header.php` ruft
   `THEME_HOOK_PREFIX . 'header'` innerhalb von `<header id="masthead" class="site-header">`
   auf, und genau dort hänge ich mich ein. Ohne diese Regel verschwände deshalb die ganze
   Kopfleiste samt Logo, Menü-Zugang und Fokus-Umschalter, und der Modus ließe sich von hier
   aus nicht mehr beenden. Ich hole nur meine eigene Kopfleiste zurück (nur wenn mein Header
   aktiv ist) und blende darin gezielt aus, was die Ruhe stört: Utilities und Schnellzugriff. */
body.ksom-active.ks-focus-on #masthead,
body.ksom-active.ks-focus-on .site-header,
body.ksom-active.ks-focus-active #masthead,
body.ksom-active.ks-focus-active .site-header {
	display: block !important;
}

.ksom-menu-switcher {
	min-width: 0;
}

.ksom-menu-switcher__pills {
	position: sticky;
	z-index: 8;
	top: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
	margin: 0 0 12px;
	padding: 5px;
	border: 1px solid var(--ksom-line);
	border-radius: 13px;
	background: var(--ksom-paper);
}

.ksom-menu-switcher__pills button {
	min-width: 0;
	min-height: 42px;
	padding: 8px 12px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	box-shadow: none;
	color: var(--ksom-muted);
	font: 14px/1 "Yantramanav Regular", var(--ksom-sans);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

/* Hover auf dem Menü-Umschalter: CI-Grün gefüllt, weiße Schrift (Kanon für On-Page-Tabs). */
.ksom-menu-switcher__pills button:hover {
	background: var(--ksom-teal);
	color: #fff;
}

.ksom-menu-switcher__pills button[aria-selected="true"] {
	background: var(--ksom-panel-button);
	color: var(--ksom-panel-button-text);
}

/* Die aktive Pille bleibt beim Überfahren stehen, damit sie nicht mit dem Hover springt. */
.ksom-menu-switcher__pills button[aria-selected="true"]:hover {
	background: var(--ksom-panel-button);
	color: var(--ksom-panel-button-text);
}

.ksom-menu-switcher__pills button:focus-visible {
	outline: 2px solid var(--ksom-teal);
	outline-offset: 2px;
}

.ksom-menu-switcher [role="tabpanel"][hidden] {
	display: none !important;
}

.ksom-panel__logo {
	border-bottom: 1px solid var(--ksom-line);
}

.ksom-panel__logo.is-align-left,
.ksom-panel__logo.is-align-left .ksom-panel__logo-light,
.ksom-panel__logo.is-align-left .ksom-panel__logo-dark {
	justify-content: flex-start;
}

.ksom-panel__logo.is-align-center,
.ksom-panel__logo.is-align-center .ksom-panel__logo-light,
.ksom-panel__logo.is-align-center .ksom-panel__logo-dark {
	justify-content: center;
}

.ksom-panel__logo.is-align-right,
.ksom-panel__logo.is-align-right .ksom-panel__logo-light,
.ksom-panel__logo.is-align-right .ksom-panel__logo-dark {
	justify-content: flex-end;
}

.ksom-panel__logo.is-align-center .ksom-panel__logo-image,
.ksom-panel__logo.is-align-center .ksom-brand__image {
	object-position: center;
}

.ksom-panel__logo.is-align-right .ksom-panel__logo-image,
.ksom-panel__logo.is-align-right .ksom-brand__image {
	object-position: right center;
}

.ksom-wp-menu--single > .ksom-menu-list > li.ksom-social {
	box-sizing: border-box;
	flex: 0 0 16.6667%;
	width: 16.6667%;
	min-width: 0;
	margin-top: 14px;
}

.ksom-panel__bottom-dock {
	position: relative;
	z-index: 20;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	min-width: 0;
	border-top: 1px solid var(--ksom-line);
	background: var(--ksom-paper);
}

.ksom-panel__bottom-dock .ksom-theme-selector {
	border-top: 0;
}

@media (min-width: 768px) {
	.ksom-panel__logo:not(.is-desktop-enabled) {
		display: none !important;
	}
}

/* 0.10.5: klare Icon-Zeile ohne doppelte Trennlinie. */
.ksom-panel__toolbar,
.ksom-panel__tools {
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.ksom-panel__toolbar::before,
.ksom-panel__toolbar::after,
.ksom-panel__tools::before,
.ksom-panel__tools::after {
	display: none !important;
	content: none !important;
}

.ksom-ai-utility__image {
	display: block !important;
	width: 24px !important;
	height: 24px !important;
	max-width: 24px !important;
	max-height: 24px !important;
	border: 0 !important;
	border-radius: 50% !important;
	object-fit: cover !important;
}

[data-ksom-ai-open][hidden] {
	display: none !important;
}

@media (max-width: 767px) {
	body.ksom-logged-in .ksom-panel__logo,
	.ksom-panel__logo:not(.is-mobile-enabled) {
		display: none !important;
	}

	body.ksom-logged-out .ksom-panel__logo.is-mobile-enabled {
		display: flex !important;
	}

	.ksom-panel__top {
		padding-right: 0;
		padding-left: 0;
	}

	.ksom-ai-dock-slot {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		padding: 8px 10px 4px;
		background: var(--ksom-paper);
	}

	.ksom-ai-dock-slot:empty {
		display: none;
	}

	.ksom-ai-dock-slot .ksai-floating--dock,
	.ksom-ai-dock-slot .ksai-floating--dock.is-ksom-docked {
		position: relative !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		transform: none !important;
	}

	html.ksom-ai-docked .ksai-floating__safe-zone {
		display: none !important;
	}

	.ksom-panel__bottom-dock .ksom-theme-selector {
		position: relative;
		z-index: 2;
		padding: 9px 12px max(12px, env(safe-area-inset-bottom));
	}
}

/* 0.10.0: Begrüßungsausrichtung und strikt gestapelte mobile Unterkante. */
.ksom-member-intro.is-align-center {
	align-items: center;
	text-align: center;
}

.ksom-member-intro.is-align-center .ksom-member-intro__identity {
	justify-content: center;
	width: 100%;
}

.ksom-member-intro.is-align-center .ksom-member-intro__actions {
	width: 100%;
}

@media (max-width: 767px) {
	.ksom-panel {
		display: flex !important;
		flex-direction: column !important;
		height: calc(100dvh - var(--ksom-admin-offset, 0px)) !important;
		max-height: calc(100dvh - var(--ksom-admin-offset, 0px)) !important;
		overflow: hidden !important;
	}

	.ksom-panel__top,
	.ksom-search,
	.ksom-panel__bottom-dock {
		flex: 0 0 auto !important;
	}

	.ksom-panel__scroll {
		position: relative !important;
		z-index: 1 !important;
		flex: 1 1 0 !important;
		min-height: 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}

	.ksom-panel__scroll .ksom-panel__footer {
		position: static !important;
		inset: auto !important;
	}

	.ksom-panel__bottom-dock {
		position: static !important;
		z-index: 3 !important;
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		isolation: isolate;
	}

	.ksom-panel__bottom-dock .ksom-ai-dock-slot {
		position: static !important;
		z-index: 1 !important;
		display: flex;
		flex: 0 0 auto !important;
		width: 100% !important;
		min-height: 74px !important;
		box-sizing: border-box !important;
		padding: 8px 10px !important;
		overflow: visible !important;
	}

	.ksom-panel__bottom-dock .ksom-ai-dock-slot:empty {
		display: none !important;
		min-height: 0 !important;
		padding: 0 !important;
	}

	.ksom-panel__bottom-dock .ksom-ai-dock-slot .ksai-floating--dock,
	.ksom-panel__bottom-dock .ksom-ai-dock-slot .ksai-floating--dock.is-ksom-docked {
		position: static !important;
		z-index: 1 !important;
		inset: auto !important;
		flex: 0 0 auto !important;
		align-self: center !important;
		width: max-content !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
		transform: none !important;
	}

	.ksom-panel__bottom-dock .ksom-theme-selector {
		position: static !important;
		z-index: 1 !important;
		display: block !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		border-top: 1px solid var(--ksom-line) !important;
		transform: none !important;
	}
}

/* 0.10.7: abschließende, modusunabhängige KI-Schaltfläche und lokale Maßregeln. */
/* Logo vertikal zentriert (align-items:center an .ksom-brand) → automatisch gleiche Abstände oben/unten.
   Die Logohöhe wird auf Header − 16px gedeckelt, damit immer ≥8px Luft bleibt und nichts abschneidet. */
@media (min-width: 768px) {
	.ksom-header {
		--ksom-active-logo-h: min(var(--ksom-header-logo-desktop-h, 48px), calc(var(--ksom-header-height, 74px) - 16px));
	}
}

@media (max-width: 767px) {
	.ksom-header {
		--ksom-active-logo-h: min(var(--ksom-header-logo-mobile-h, 36px), calc(var(--ksom-header-height, 60px) - 16px));
	}
}

.ksom-header .ksom-brand__image {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: var(--ksom-active-logo-h, 58px) !important;
	margin: 0 !important;
}

.ksom-panel__toolbar,
.ksom-panel__tools {
	border-bottom: 0 !important;
	box-shadow: none !important;
}

.ksom-panel__toolbar::before,
.ksom-panel__toolbar::after,
.ksom-panel__tools::before,
.ksom-panel__tools::after {
	display: none !important;
	content: none !important;
}

.ksom-panel .ksom-panel__tools .ksom-ai-utility,
html.ksom-dark-mode .ksom-panel .ksom-panel__tools .ksom-ai-utility {
	display: inline-flex !important;
	position: relative !important;
	flex: 0 0 42px !important;
	align-items: center !important;
	justify-content: center !important;
	width: 42px !important;
	min-width: 42px !important;
	height: 42px !important;
	min-height: 42px !important;
	padding: 0 !important;
	border: 1px solid rgba(255, 255, 255, .55) !important;
	border-radius: 50% !important;
	background: var(--ksom-teal, #407d82) !important;
	color: #fff !important;
	box-shadow: 0 0 0 4px rgba(64, 125, 130, .16), 0 5px 14px rgba(15, 35, 48, .22) !important;
	overflow: hidden !important;
	line-height: 0 !important;
}

.ksom-panel .ksom-panel__tools .ksom-ai-utility:hover,
.ksom-panel .ksom-panel__tools .ksom-ai-utility:focus-visible {
	background: var(--ksom-teal-bright, #4b9498) !important;
	color: #fff !important;
}

.ksom-panel .ksom-ai-utility__image {
	display: block !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	/* Prozent des Knopfes statt fester 25px (24.08.2026), im Backend einstellbar. */
	width: var(--ksom-ai-img-head, 55%) !important;
	height: var(--ksom-ai-img-head, 55%) !important;
	max-width: var(--ksom-ai-img-head, 55%) !important;
	max-height: var(--ksom-ai-img-head, 55%) !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: transparent !important;
	filter: none !important;
	opacity: 1 !important;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	margin: 0 !important;
	transform: translate(-50%, -50%) !important;
	mix-blend-mode: normal !important;
}

.ksom-panel .ksom-ai-utility > .ksom-icon {
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	color: #fff !important;
	margin: 0 !important;
	transform: translate(-50%, -50%) !important;
}

[data-ksom-ai-open][hidden] {
	display: none !important;
}

/* 0.10.1: Mobile Kopfzeile sowie KI- und Darstellungsbereiche im Scrollfluss. */
@media (max-width: 767px) {
	.ksom-panel__top {
		display: block !important;
		width: 100% !important;
		min-height: 0 !important;
		padding: 0 !important;
		overflow: visible !important;
	}

	body.ksom-logged-out .ksom-panel__logo.is-mobile-enabled {
		display: flex !important;
		box-sizing: border-box !important;
		width: 100% !important;
		min-height: calc(var(--ksom-panel-logo-h, 58px) + 34px) !important;
		padding: 17px 28px 16px !important;
		overflow: visible !important;
	}

	.ksom-panel__logo .ksom-panel__logo-image,
	.ksom-panel__logo .ksom-brand__image {
		display: block !important;
		flex: 0 1 auto !important;
		width: auto !important;
		height: auto !important;
		max-width: 100% !important;
		max-height: var(--ksom-panel-logo-h, 58px) !important;
		object-fit: contain !important;
	}

	.ksom-panel__toolbar {
		position: relative !important;
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto !important;
		align-items: center !important;
		width: 100% !important;
		min-width: 0 !important;
		min-height: 64px !important;
	}

	.ksom-panel__tools {
		position: static !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		grid-column: 1 !important;
		min-width: 0 !important;
		min-height: 64px !important;
		padding: 7px 6px 7px 14px !important;
		overflow: hidden !important;
	}

	.ksom-panel__tools .ksom-utility,
	.ksom-panel__tools .ksom-icon-link {
		flex: 0 1 46px !important;
		min-width: 40px !important;
		padding-right: 7px !important;
		padding-left: 7px !important;
	}

	.ksom-panel__toolbar .ks-om-close {
		position: static !important;
		inset: auto !important;
		grid-column: 2 !important;
		width: 52px !important;
		min-width: 52px !important;
		height: 52px !important;
		margin: 6px 12px 6px 6px !important;
		transform: none !important;
	}

	.ksom-panel__scroll {
		display: block !important;
		flex: 1 1 0 !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
	}

	.ksom-panel__scroll .ksom-panel__bottom-dock {
		position: static !important;
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		margin: 0 !important;
		overflow: visible !important;
	}

	.ksom-panel__scroll .ksom-ai-dock-slot {
		position: static !important;
		display: flex;
		order: 1 !important;
		width: 100% !important;
		min-height: 78px !important;
		padding: 10px 12px !important;
		overflow: visible !important;
	}

	.ksom-panel__scroll .ksom-ai-dock-slot:empty {
		display: none !important;
		min-height: 0 !important;
		padding: 0 !important;
	}

	.ksom-panel__scroll .ksom-theme-selector {
		position: static !important;
		order: 2 !important;
		width: 100% !important;
		margin: 0 !important;
		padding: 18px 18px max(20px, env(safe-area-inset-bottom)) !important;
		transform: none !important;
	}

	.ksom-panel__scroll .ksom-ai-dock-slot .ksai-floating--dock,
	.ksom-panel__scroll .ksom-ai-dock-slot .ksai-floating--dock.is-ksom-docked {
		position: static !important;
		inset: auto !important;
		z-index: 1 !important;
		width: max-content !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
		transform: none !important;
	}

	html.ksom-menu-open .ksai-floating--dock:not(.is-ksom-docked) {
		visibility: hidden !important;
		pointer-events: none !important;
	}

	html.ksom-ai-docked .ksai-floating__safe-zone {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
	}
}

/* 0.10.2: Desktop-Logo nutzt die Headerhöhe abzüglich exakt 10 px oben und unten. */
@media (min-width: 768px) {
	.ksom-header .ksom-brand {
		display: flex !important;
		align-items: center !important;
		box-sizing: border-box !important;
		height: 100% !important;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		overflow: visible !important;
	}

	.ksom-header .ksom-brand > a {
		display: flex !important;
		align-items: center !important;
		height: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.ksom-header .ksom-brand__image {
		display: block !important;
		width: auto !important;
		height: min(var(--ksom-header-logo-h, 70px), calc(var(--ksom-header-height, 90px) - 20px)) !important;
		max-width: min(320px, 34vw) !important;
		max-height: calc(var(--ksom-header-height, 90px) - 20px) !important;
		margin: 0 !important;
		object-fit: contain !important;
		object-position: left center !important;
	}
}

/* 0.7.0: anpassbarer Vollbreiten-Header und semantische Panel-Farben. */
body.ksom-active #masthead,
body.ksom-active #masthead.site-header,
body.ksom-active .site-header {
	box-sizing: border-box !important;
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	max-width: none !important;
	margin-right: 0 !important;
	margin-left: 0 !important;
	padding-right: 0 !important;
	padding-left: 0 !important;
	overflow: visible !important;
}

.ksom-header {
	width: 100%;
	max-width: none;
}

.ksom-header__inner {
	box-sizing: border-box;
	width: min(calc(100% - 48px), var(--ksom-header-content-width, 1340px));
	max-width: none;
}

.ksom-brand__image {
	width: auto !important;
	height: auto !important;
	max-height: var(--ksom-active-logo-h, var(--ksom-header-logo-h, 48px)) !important;
}

.ksom-overlay__scrim,
.ksom-overlay__scrim:hover,
.ksom-overlay__scrim:focus,
.ksom-overlay__scrim:focus-visible,
.ksom-overlay__scrim:active {
	border: 0 !important;
	background: var(--ksom-scrim-color, #0c1c28) !important;
	box-shadow: none !important;
	filter: none !important;
}

.ksom-overlay.is-open .ksom-overlay__scrim {
	opacity: var(--ksom-scrim-opacity, .72);
}

.ksom-panel {
	--ksom-cream: var(--ksom-light-background, #e1ddd4);
	--ksom-paper: var(--ksom-light-surface, #fff);
	--ksom-text: var(--ksom-light-text, #253d54);
	--ksom-navy: var(--ksom-light-text, #253d54);
	--ksom-muted: var(--ksom-light-muted, #6f7c86);
	--ksom-teal: var(--ksom-light-accent, #326569);
	--ksom-teal-bright: var(--ksom-light-accent, #326569);
	--ksom-line: var(--ksom-light-line, #ddd8cf);
	--ksom-panel-icon-color: var(--ksom-light-icon, #253d54);
	--ksom-panel-button: var(--ksom-light-button, #253d54);
	--ksom-panel-button-text: var(--ksom-light-button-text, #fff);
	--ksom-panel-badge: var(--ksom-light-badge, #326569);
	--ksom-panel-badge-text: var(--ksom-light-badge-text, #fff);
	background: var(--ksom-cream);
	color: var(--ksom-text);
}

html.ksom-dark-mode .ksom-panel {
	--ksom-cream: var(--ksom-dark-background, #101a23);
	--ksom-paper: var(--ksom-dark-surface, #172733);
	--ksom-text: var(--ksom-dark-text, #e7f0f2);
	--ksom-navy: var(--ksom-dark-text, #e7f0f2);
	--ksom-muted: var(--ksom-dark-muted, #8ea0ad);
	--ksom-teal: var(--ksom-dark-accent, #407d82);
	--ksom-teal-bright: var(--ksom-dark-accent, #407d82);
	--ksom-line: var(--ksom-dark-line, #344a56);
	--ksom-panel-icon-color: var(--ksom-dark-icon, #e7f0f2);
	--ksom-panel-button: var(--ksom-dark-button, #407d82);
	--ksom-panel-button-text: var(--ksom-dark-button-text, #0f161d);
	--ksom-panel-badge: var(--ksom-dark-badge, #407d82);
	--ksom-panel-badge-text: var(--ksom-dark-badge-text, #0f161d);
}

.ksom-panel__top {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	padding: 0;
	background: var(--ksom-paper);
}

.ksom-panel__logo {
	display: none;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: none;
	padding: 12px 18px 8px;
}

.ksom-panel__logo.is-desktop-enabled {
	display: flex;
}

.ksom-panel__logo .ksom-panel__logo-image,
.ksom-panel__logo .ksom-brand__image {
	width: auto !important;
	height: var(--ksom-panel-logo-h, 58px) !important;
	max-height: var(--ksom-panel-logo-h, 58px) !important;
	object-fit: contain;
	object-position: left center;
}

.ksom-panel__toolbar {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 58px;
	border-bottom: 1px solid var(--ksom-line);
	background: var(--ksom-paper);
}

.ksom-panel__tools {
	flex: 1 1 auto;
	justify-content: flex-start !important;
	min-width: 0;
	min-height: 58px;
	padding: 6px 8px 6px 16px;
	border: 0;
	background: transparent;
}

.ksom-panel__toolbar .ks-om-close {
	flex: 0 0 44px;
	margin: 7px 12px 7px auto;
}

.ksom-panel__toolbar .ksom-icon,
.ksom-panel__tools .ksom-icon-link,
.ksom-panel__tools .ksom-utility,
.ksom-panel__toolbar .ks-om-close,
.ksom-panel .ksom-menu-icon,
.ksom-panel .ksom-social > a {
	color: var(--ksom-panel-icon-color) !important;
}

/* ---- Close-Button-Stile (Backend-Option ksom_close_button_style), stabiler Hintergrund ---- */
.ksom-panel__toolbar .ks-om-close.ksom-close--filled-green { background: #326569 !important; color: #fff !important; border: 0 !important; }
.ksom-panel__toolbar .ks-om-close.ksom-close--filled-blue { background: #253d54 !important; color: #fff !important; border: 0 !important; }
.ksom-panel__toolbar .ks-om-close.ksom-close--outline { background: transparent !important; border: 1px solid currentColor !important; }
.ksom-panel__toolbar .ks-om-close.ksom-close--plain { background: transparent !important; border: 0 !important; }
/* Icon auf gefülltem Grund weiß — die Direkt-Regel .ksom-icon (Panel-Icon-Farbe) sonst dunkel/unsichtbar. */
.ksom-panel__toolbar .ks-om-close.ksom-close--filled-green .ksom-icon,
.ksom-panel__toolbar .ks-om-close.ksom-close--filled-blue .ksom-icon { color: #fff !important; }
.ksom-panel__toolbar .ks-om-close.ksom-close--filled-green:hover,
.ksom-panel__toolbar .ks-om-close.ksom-close--filled-green:focus-visible,
.ksom-panel__toolbar .ks-om-close.ksom-close--filled-blue:hover,
.ksom-panel__toolbar .ks-om-close.ksom-close--filled-blue:focus-visible { filter: brightness(1.12); }

/* ---- Gast-Begrüßung zentriert (Option ksom_guest_intro_align) ---- */
.ksom-guest-intro.is-center { text-align: center; }
.ksom-guest-intro.is-center > p:not(.ksom-eyebrow) { margin-left: auto; margin-right: auto; }
.ksom-guest-intro.is-center .ksom-guest-intro__actions { justify-content: center; }

/* ---- Menü-Item-Ecken: Utility-Klassen fürs erste/letzte Item (im WP-Menü-Editor setzen) ---- */
.ksom-wp-menu--single .ksom-menu-list > li.ksom-round-top { border-top-left-radius: 12px; border-top-right-radius: 12px; overflow: hidden; }
.ksom-wp-menu--single .ksom-menu-list > li.ksom-round-bottom { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; overflow: hidden; }

.ksom-panel .ksom-count {
	background: var(--ksom-panel-badge) !important;
	color: var(--ksom-panel-badge-text) !important;
}

.ksom-panel .ksom-button.is-primary,
.ksom-panel .ksom-theme-selector button.is-active,
.ksom-panel .ksom-search button {
	background: var(--ksom-panel-button) !important;
	color: var(--ksom-panel-button-text) !important;
}

.ksom-panel .ksom-social {
	margin-top: 14px;
}

.ksom-panel .ksom-fixed-footer-link {
	display: none !important;
}

.ksom-wp-menu--single > .ksom-menu-list > li.ksom-community {
	border-left: 3px solid var(--ksom-teal);
	background: var(--ksom-paper);
}

.ksom-wp-menu--single > .ksom-menu-list > li.ksom-community > a {
	background: color-mix(in srgb, var(--ksom-teal) 9%, var(--ksom-paper));
	font-weight: 500;
}

.ksom-panel__footer:not(.is-guest) {
	gap: 8px;
	padding-right: 18px;
	padding-left: 18px;
}

.ksom-panel__footer:not(.is-guest) a {
	justify-content: center;
	min-width: 0;
	font-size: 13px;
}

.ksom-snapshot {
	position: relative;
	overflow: hidden;
}

.ksom-snapshot.has-image::after {
	position: absolute;
	z-index: 0;
	right: 0;
	bottom: 0;
	width: 58%;
	height: 76%;
	background:
		linear-gradient(90deg, var(--ksom-paper) 0%, transparent 48%),
		linear-gradient(0deg, transparent 45%, var(--ksom-paper) 100%),
		var(--ksom-snapshot-image) right bottom / cover no-repeat;
	opacity: .32;
	content: "";
	pointer-events: none;
}

.ksom-snapshot > * {
	position: relative;
	z-index: 1;
}

.ksom-ai-dock-slot {
	flex: 0 0 auto;
	padding: 0 16px 12px;
	background: var(--ksom-paper);
}

.ksom-ai-dock-slot:empty {
	display: none;
}

@media (max-width: 767px) {
	.ksom-header__inner {
		width: calc(100% - 24px);
	}

	.ksom-panel__logo.is-desktop-enabled {
		display: none;
	}

	.ksom-panel__logo.is-mobile-enabled {
		display: flex;
	}
}

@media (max-width: 430px) {
	.ksom-panel__top {
		padding-right: 8px;
		padding-left: 10px;
	}

	.ksom-panel__mark {
		width: 45px;
	}

	.ksom-utility,
	.ksom-icon-button {
		min-width: 41px;
		width: 41px;
	}

	.ksom-member-intro__actions,
	.ksom-guest-intro__actions {
		grid-template-columns: 1fr;
	}

	.ksom-panel__footer:not(.is-guest) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ksom-panel__footer:not(.is-guest) a {
		min-width: 0;
	}

	.ksom-panel__footer.is-guest a {
		min-width: auto;
	}
}

/* Persistenter Dark Mode für Seitenfläche, Header-Popovers und Overlay. */
html.ksom-dark-mode {
	color-scheme: dark;
	--ksom-cream: #101a23;
	--ksom-paper: #172733;
	--ksom-soft: #213541;
	--ksom-line: #344a56;
	--ksom-text: #e4ecef;
	--ksom-muted: #aab9c0;
}

html.ksom-dark-mode body.ksom-active,
html.ksom-dark-mode body.ksom-active #page,
html.ksom-dark-mode body.ksom-active .site,
html.ksom-dark-mode body.ksom-active #content,
html.ksom-dark-mode body.ksom-active .site-content,
html.ksom-dark-mode body.ksom-active .content-area {
	background-color: #101a23;
	color: var(--ksom-text);
}

html.ksom-dark-mode body.ksom-active .entry-content,
html.ksom-dark-mode body.ksom-active .entry-content p,
html.ksom-dark-mode body.ksom-active .entry-content li,
html.ksom-dark-mode body.ksom-active .entry-content h1,
html.ksom-dark-mode body.ksom-active .entry-content h2,
html.ksom-dark-mode body.ksom-active .entry-content h3,
html.ksom-dark-mode body.ksom-active .entry-content h4 {
	color: var(--ksom-text);
}

html.ksom-dark-mode .ksom-panel,
html.ksom-dark-mode .ksom-panel__scroll,
html.ksom-dark-mode .ksom-panel__content,
html.ksom-dark-mode .ksom-wp-menu--single > .ksom-menu-list > li,
html.ksom-dark-mode .ksom-snapshot,
html.ksom-dark-mode .ksom-progress,
html.ksom-dark-mode .ksom-panel__footer {
	background: var(--ksom-cream);
	color: var(--ksom-text);
}

html.ksom-dark-mode .ksom-panel__top,
html.ksom-dark-mode .ksom-search,
html.ksom-dark-mode .ksom-search form,
html.ksom-dark-mode .ksom-member-intro,
html.ksom-dark-mode .ksom-guest-intro,
html.ksom-dark-mode .ksom-quick-menu__panel.notification-dropdown,
html.ksom-dark-mode .ksom-quick-menu__header,
html.ksom-dark-mode .ksom-wp-menu--single .sub-menu {
	border-color: var(--ksom-line);
	background: var(--ksom-paper);
	color: var(--ksom-text);
}

html.ksom-dark-mode .ksom-menu-list a,
html.ksom-dark-mode .ksom-wp-menu--single li.ksom-social .ksom-menu-icon,
html.ksom-dark-mode .ksom-quick-menu__list .notification-content,
html.ksom-dark-mode .ksom-quick-menu__cart,
html.ksom-dark-mode .ksom-search input,
html.ksom-dark-mode .ksom-member-intro h2,
html.ksom-dark-mode .ksom-guest-intro h2,
html.ksom-dark-mode .ksom-quick-menu__header h2 {
	color: var(--ksom-text);
}

html.ksom-dark-mode .ksom-icon-button,
html.ksom-dark-mode .ksom-utility,
html.ksom-dark-mode .ksom-panel__utilities .ksom-icon-link,
html.ksom-dark-mode .ksom-submenu-toggle {
	color: var(--ksom-text);
}

/* Menü-Icons wechseln im Dark Mode auf aufgehelltes CI-Grün; Panel-Werkzeug-Icons auf hellen Text. */
html.ksom-dark-mode .ksom-menu-icon,
html.ksom-dark-mode .ksom-menu-list .sub-menu a::after {
	color: #407d82;
}

/* Nur die beiden literalen Hover-/Aktiv-Flächen brauchen im Dark Mode einen eigenen Wert: sie sind aus
   CI-Grün #326569 gemischt und damit auf dunklem Grund zu dunkel. Balken, Textfarbe, Icon und der
   Pill-Hover ziehen automatisch mit, weil `html.ksom-dark-mode .ksom-panel` --ksom-teal/--ksom-navy
   bereits auf das aufgehellte #407d82 bzw. helle Textfarbe umdefiniert. */
html.ksom-dark-mode .ksom-menu-list .sub-menu a:hover,
html.ksom-dark-mode .ksom-menu-list .sub-menu a:focus-visible,
html.ksom-dark-mode .ksom-menu-list > li > a:hover,
html.ksom-dark-mode .ksom-menu-list > li > a:focus-visible {
	background: rgba(64,125,130,.20);
}

html.ksom-dark-mode .ksom-menu-list li.current-menu-item > a,
html.ksom-dark-mode .ksom-menu-list a[aria-current="page"] {
	background: rgba(64,125,130,.22);
}

html.ksom-dark-mode .ksom-panel__tools .ksom-icon-link,
html.ksom-dark-mode .ksom-panel__tools .ksom-utility {
	color: var(--ksom-text);
}

html.ksom-dark-mode .ksom-button.is-secondary,
html.ksom-dark-mode .ksom-member-intro__actions a {
	border-color: var(--ksom-line);
	background: var(--ksom-soft);
	color: var(--ksom-text);
}

html.ksom-dark-mode .ksom-quick-menu__panel,
html.ksom-dark-mode .ksom-snapshot {
	box-shadow: 0 16px 42px rgba(0,0,0,.28);
}

@media (prefers-reduced-motion: reduce) {
	.ksom-panel,
	.ksom-overlay__scrim,
	.ksom-submenu-toggle::before,
	.ksom-submenu-toggle::after {
		transition-duration: .01ms !important;
	}
}

/* Redesign 0.5.0: kompakter Header und zweizeiliger Panelkopf.
   Die Breite liest die Variable, 1340 ist nur der Rückfall (21.08.2026). Vorher stand hier
   eine harte 1340, die die variable Regel weiter oben überstimmte, weil sie später im
   Stylesheet steht. Praktisch fiel das nie auf, weil das Element ein Inline-`max-width` mit
   `!important` aus der eingestellten Breite trägt und damit ohnehin gewinnt. Bliebe die harte
   Zahl stehen, hätte aber jeder, der dieses Inline-Style später aufräumt, unbemerkt wieder
   einen Deckel bei 1340. */
.ksom-header__inner {
	width: min(calc(100% - 48px), var(--ksom-header-content-width, 1340px));
	padding-right: 4px;
	overflow: visible;
}

.ksom-brand {
	flex: 1 1 auto;
	overflow: visible;
}

.ksom-brand a {
	max-width: 100%;
}

.ksom-brand__image {
	max-height: var(--ksom-header-logo-h, 40px);
}

.ksom-header__actions {
	flex: 0 0 auto;
	min-width: 0;
	align-items: center;
}

.ksom-header__utilities {
	min-height: 46px;
	align-items: center;
}

.ksom-header__utilities .ksom-icon-link {
	height: 44px;
	color: rgba(255,255,255,.72);
	line-height: 1;
}

.ksom-header__utilities .ksom-icon {
	width: var(--ksom-header-icon, 19px);
	height: var(--ksom-header-icon, 19px);
	font-size: var(--ksom-header-icon, 19px);
	line-height: 1;
}

.ksom-user-trigger {
	gap: 9px;
	max-width: min(260px, 34vw);
	min-height: 46px;
	padding: 4px 10px 4px 4px;
	background: rgba(255,255,255,.10);
}

.ksom-user-trigger:not(.has-avatar) {
	padding-left: 10px;
}

.ksom-user-trigger__name {
	min-width: 0;
	max-width: 120px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ksom-user-trigger__divider {
	align-self: center;
	width: 1px;
	height: 24px;
	background: rgba(255,255,255,.22);
}

.ksom-user-trigger:not(.has-avatar) .ksom-user-trigger__divider {
	display: none;
}

.ksom-user-trigger__menu,
.ksom-user-trigger__menu .ksom-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	font-size: 21px;
	line-height: 1;
}

body.ksom-menu-open {
	overscroll-behavior: none;
}

html.ksom-menu-open {
	background: var(--ksom-navy);
	overscroll-behavior: none;
}

.ksom-overlay {
	inset: var(--ksom-admin-offset) 0 0;
	height: calc(100vh - var(--ksom-admin-offset));
	background: transparent;
	overscroll-behavior: none;
}

.ksom-panel {
	width: min(100%, var(--ksom-panel-width, 460px));
	max-width: var(--ksom-panel-width, 460px);
	overscroll-behavior: none;
}

.ksom-panel__top {
	min-height: 88px;
	padding: 14px 18px 10px;
}

.ksom-panel__top .ks-om-close {
	flex: 0 0 44px;
	margin-left: auto;
}

.ksom-panel__logo {
	display: flex;
	align-items: center;
	min-width: 0;
	max-width: calc(100% - 64px);
	max-height: 58px;
	overflow: visible;
	text-decoration: none;
}

.ksom-panel__logo-light,
.ksom-panel__logo-dark {
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
}

.ksom-panel__logo-dark {
	display: none;
}

html.ksom-dark-mode .ksom-panel__logo-light {
	display: none;
}

html.ksom-dark-mode .ksom-panel__logo-dark {
	display: flex;
}

.ksom-panel__logo .ksom-panel__logo-image,
.ksom-panel__logo .ksom-brand__image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 58px;
	object-fit: contain;
	object-position: left center;
}

.ksom-panel__logo .ksom-brand__fallback {
	color: var(--ksom-navy);
	font-family: var(--ksom-serif);
	font-size: 21px;
	font-weight: 500;
}

.ksom-panel__tools {
	position: relative;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 5px;
	min-height: 58px;
	padding: 6px 16px 8px;
	border-bottom: 1px solid var(--ksom-line);
	background: var(--ksom-paper);
}

.ksom-panel[data-align="left"] .ksom-panel__tools { justify-content: flex-start; }
.ksom-panel[data-align="center"] .ksom-panel__tools { justify-content: center; }
.ksom-panel[data-align="right"] .ksom-panel__tools { justify-content: flex-end; }

/* KI-Icon bleibt links; die übrigen Icons (Suche/Nachrichten/Cart) mittig zwischen KI und Close.
   Auto-Margins am Wrapper zentrieren ihn im verfügbaren Raum, unabhängig von justify-content. */
.ksom-panel__tools-mid {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
}

.ksom-panel__tools .ksom-utility,
.ksom-panel__tools .ksom-icon-link {
	width: 44px;
	min-width: 44px;
	height: 44px;
	padding: 0;
}

.ksom-panel__tools .ksom-utility > span:not(.ksom-count) {
	display: none;
}

.ksom-panel__tools .ksom-icon {
	width: var(--ksom-panel-icon, 20px);
	height: var(--ksom-panel-icon, 20px);
	font-size: var(--ksom-panel-icon, 20px);
	line-height: 1;
}

.ksom-theme-selector {
	flex: 0 0 auto;
	padding: 12px 16px 18px;
	border-top: 1px solid var(--ksom-line);
	background: var(--ksom-paper);
}

.ksom-theme-selector__label {
	display: block;
	margin-bottom: 7px;
	color: var(--ksom-muted);
	font-family: "Yantramanav Regular", var(--ksom-sans);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.ksom-theme-selector__options {
	display: flex;
	gap: 5px;
	padding: 5px;
	border-radius: 12px;
	background: var(--ksom-soft);
}

.ksom-theme-selector button {
	display: inline-flex;
	flex: 1 1 0;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-width: 0;
	min-height: 40px;
	padding: 7px 5px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ksom-muted);
	font: 13px/1 "Yantramanav Regular", var(--ksom-sans);
	cursor: pointer;
}

.ksom-theme-selector button.is-active {
	background: var(--ksom-navy);
	color: #fff;
}

.ksom-theme-selector .ksom-icon {
	width: 16px;
	height: 16px;
	font-size: 15px;
}

body.ksom-logged-out .ksom-panel .ksom-members-only,
body.ksom-logged-in .ksom-panel .ksom-guests-only {
	display: none !important;
}

.ksom-overlay[hidden],
.ksom-search[hidden],
.ksom-quick-menu__panel[hidden],
[data-ksom-media-remove][hidden] {
	display: none !important;
}

html.ksom-dark-mode .ksom-panel__tools,
html.ksom-dark-mode .ksom-theme-selector {
	border-color: var(--ksom-line);
	background: var(--ksom-paper);
}

html.ksom-dark-mode .ksom-panel__logo .ksom-brand__fallback {
	color: var(--ksom-text);
}

@media (max-width: 767px) {
	.ksom-header__inner {
		width: calc(100% - 24px);
		padding-right: 2px;
	}

	.ksom-brand__image {
		max-width: min(220px, 50vw);
		max-height: var(--ksom-header-logo-h, 40px);
	}

	.ksom-user-trigger {
		min-width: 0;
		padding: 3px 8px 3px 3px;
	}

	.ksom-user-trigger.has-avatar {
		max-width: 116px;
	}

	.ksom-user-trigger__name {
		display: none;
	}

	.ksom-panel {
		width: min(100%, var(--ksom-panel-width, 460px));
		max-width: var(--ksom-panel-width, 460px);
	}
}

/* 0.9.0 cascade guard: muss nach den historischen Kompatibilitätsregeln stehen. */
.ksom-panel__logo {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: auto;
	max-height: none;
	padding: 12px 18px 8px;
	border-bottom: 1px solid var(--ksom-line);
}

.ksom-panel__logo.is-align-left,
.ksom-panel__logo.is-align-left .ksom-panel__logo-light,
.ksom-panel__logo.is-align-left .ksom-panel__logo-dark { justify-content: flex-start; }
.ksom-panel__logo.is-align-center,
.ksom-panel__logo.is-align-center .ksom-panel__logo-light,
.ksom-panel__logo.is-align-center .ksom-panel__logo-dark { justify-content: center; }
.ksom-panel__logo.is-align-right,
.ksom-panel__logo.is-align-right .ksom-panel__logo-light,
.ksom-panel__logo.is-align-right .ksom-panel__logo-dark { justify-content: flex-end; }

.ksom-wp-menu--single > .ksom-menu-list > li.ksom-social {
	box-sizing: border-box;
	flex: 0 0 16.6667%;
	width: 16.6667%;
	min-width: 0;
	margin-top: 14px;
}

.ksom-panel__bottom-dock {
	position: relative;
	z-index: 20;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	min-width: 0;
	border-top: 1px solid var(--ksom-line);
	background: var(--ksom-paper);
}

.ksom-panel__bottom-dock .ksom-theme-selector { border-top: 0; }

@media (min-width: 768px) {
	.ksom-panel__logo:not(.is-desktop-enabled) { display: none !important; }
}

@media (max-width: 767px) {
	body.ksom-logged-in .ksom-panel__logo,
	.ksom-panel__logo:not(.is-mobile-enabled) { display: none !important; }
	body.ksom-logged-out .ksom-panel__logo.is-mobile-enabled { display: flex !important; }
	.ksom-panel__top { min-height: 0; padding: 0; }
	.ksom-panel__logo { max-width: none; }
	.ksom-ai-dock-slot {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
		padding: 8px 10px 4px;
	}
	.ksom-ai-dock-slot:empty { display: none; }
	.ksom-ai-dock-slot .ksai-floating--dock,
	.ksom-ai-dock-slot .ksai-floating--dock.is-ksom-docked {
		position: relative !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: auto !important;
		max-width: 100% !important;
		margin: 0 auto !important;
		transform: none !important;
	}
	html.ksom-ai-docked .ksai-floating__safe-zone { display: none !important; }
	.ksom-panel__bottom-dock .ksom-theme-selector {
		position: relative;
		z-index: 2;
		padding: 9px 12px max(12px, env(safe-area-inset-bottom));
	}
}

/* 0.10.0 final cascade guard. */
.ksom-member-intro.is-align-center {
	align-items: center;
	text-align: center;
}
.ksom-member-intro.is-align-center .ksom-member-intro__identity {
	justify-content: center;
	width: 100%;
}
.ksom-member-intro.is-align-center .ksom-member-intro__actions { width: 100%; }

@media (max-width: 767px) {
	.ksom-panel {
		display: flex !important;
		flex-direction: column !important;
		height: calc(100dvh - var(--ksom-admin-offset, 0px)) !important;
		max-height: calc(100dvh - var(--ksom-admin-offset, 0px)) !important;
		overflow: hidden !important;
	}
	.ksom-panel__top,
	.ksom-search,
	.ksom-panel__bottom-dock { flex: 0 0 auto !important; }
	.ksom-panel__scroll {
		position: relative !important;
		z-index: 1 !important;
		flex: 1 1 0 !important;
		min-height: 0 !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
	}
	.ksom-panel__scroll .ksom-panel__footer {
		position: static !important;
		inset: auto !important;
	}
	.ksom-panel__bottom-dock {
		position: static !important;
		z-index: 3 !important;
		display: flex !important;
		flex-direction: column !important;
		width: 100% !important;
		min-height: 0 !important;
		max-height: none !important;
		overflow: visible !important;
		isolation: isolate;
	}
	.ksom-panel__bottom-dock .ksom-ai-dock-slot {
		position: static !important;
		z-index: 1 !important;
		display: flex;
		flex: 0 0 auto !important;
		width: 100% !important;
		min-height: 74px !important;
		box-sizing: border-box !important;
		padding: 8px 10px !important;
		overflow: visible !important;
	}
	.ksom-panel__bottom-dock .ksom-ai-dock-slot:empty {
		display: none !important;
		min-height: 0 !important;
		padding: 0 !important;
	}
	.ksom-panel__bottom-dock .ksom-ai-dock-slot .ksai-floating--dock,
	.ksom-panel__bottom-dock .ksom-ai-dock-slot .ksai-floating--dock.is-ksom-docked {
		position: static !important;
		z-index: 1 !important;
		inset: auto !important;
		flex: 0 0 auto !important;
		align-self: center !important;
		width: max-content !important;
		max-width: 100% !important;
		height: auto !important;
		margin: 0 auto !important;
		transform: none !important;
	}
	.ksom-panel__bottom-dock .ksom-theme-selector {
		position: static !important;
		z-index: 1 !important;
		display: block !important;
		flex: 0 0 auto !important;
		width: 100% !important;
		box-sizing: border-box !important;
		margin: 0 !important;
		border-top: 1px solid var(--ksom-line) !important;
		transform: none !important;
	}
}

/*
 * 0.11.1 Logo-Fit — MUSS am Dateiende stehen (letzte Regel gewinnt Reihenfolge).
 * Grund: Bildoptimierer (Imagify) wandeln unser <img> in <picture> um und heben
 * Klasse + Inline-Style auf den <picture>-Wrapper; das echte <img> darin bleibt
 * dann unbegrenzt. Wir begrenzen deshalb zusätzlich das innere <img> selbst
 * (Selektor .ksom-brand img), das der Optimierer nicht anfassen kann. Die
 * Zielhöhe --ksom-active-logo-h wird identisch auch inline (#ksom-logo-fit)
 * gerechnet, falls WP Rocket „Used CSS" dieses Stylesheet entfernt.
 */
.ksom-header .ksom-brand {
	--ksom-active-logo-h: var(--ksom-header-logo-mobile-h, 40px);
}
@media (min-width: 768px) {
	.ksom-header .ksom-brand {
		--ksom-active-logo-h: var(--ksom-header-logo-desktop-h, 58px);
	}
}
.ksom-header .ksom-brand img,
.ksom-header .ksom-brand picture,
.ksom-header .ksom-brand__image,
.ksom-header .ksom-brand__image img {
	display: block !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: var(--ksom-active-logo-h, 48px) !important;
	margin: 0 !important;
}

/* 0.13.0: eigener Schnellzugriff statt des schwer pflegbaren BuddyPanels. */
.ksom-quick-access-rail { display:none; }

@media (min-width:1024px) {
	/* Schwebendes Pill im KI-Panel-Look — vollständig var-gesteuert (Backend-Optionen). */
	.ksom-quick-access-rail {
		position:fixed;
		top:50%;
		left:var(--ksom-qa-offx, 12px);
		z-index:610;
		display:flex;
		flex-direction:column;
		width:calc(var(--ksom-qa-size, 46px) + var(--ksom-qa-pad, 8px) * 2);
		max-height:calc(100vh - var(--ksom-admin-offset, 0px) - 32px);
		padding:var(--ksom-qa-pad, 8px);
		border:1px solid rgba(37,61,84,.10);
		border-radius:var(--ksom-qa-radius, 16px);
		background:var(--ksom-qa-bg, #fff);
		box-shadow:0 8px 26px rgba(37,61,84,.16);
		color:var(--ksom-qa-icon, #253d54);
		overflow:visible;
		transform:translateY(-50%);
		transition:width .25s ease;
	}
	.ksom-quick-access-rail.is-expanded { width:220px; }
	.ksom-quick-access-rail__toggle {
		display:flex;
		align-items:center;
		justify-content:center;
		gap:0;
		width:100%;
		height:var(--ksom-qa-size, 46px);
		margin-bottom:var(--ksom-qa-gap, 6px);
		padding:0;
		border:0;
		border-radius:calc(var(--ksom-qa-radius, 16px) - 5px);
		background:transparent;
		color:var(--ksom-qa-icon, #253d54);
		font-family:'Yantramanav Regular','Yantramanav Light','Yantramanav',sans-serif;
		font-size:14px;
		white-space:nowrap;
		cursor:pointer;
		transition:background-color .2s ease,color .2s ease;
	}
	.ksom-quick-access-rail__toggle:hover,
	.ksom-quick-access-rail__toggle:focus-visible { background:var(--ksom-qa-hover-bg, rgba(50,101,105,.12)); color:var(--ksom-qa-hover-icon, #326569); }
	.ksom-quick-access-rail.is-expanded .ksom-quick-access-rail__toggle { justify-content:flex-start; gap:12px; padding:0 12px; }
	.ksom-quick-access-rail__toggle i { flex:0 0 auto; transition:transform .25s ease; }
	.ksom-quick-access-rail.is-expanded .ksom-quick-access-rail__toggle i { transform:rotate(180deg); }
	.ksom-quick-access-rail__toggle-label { max-width:0; overflow:hidden; opacity:0; transition:opacity .15s ease; }
	.ksom-quick-access-rail.is-expanded .ksom-quick-access-rail__toggle-label { max-width:none; opacity:1; }
	.ksom-quick-access-menu--desktop { overflow:visible; }
	.ksom-quick-access-menu--desktop::-webkit-scrollbar { display:none; }
	.ksom-quick-access-menu--desktop ul { display:flex; flex-direction:column; gap:var(--ksom-qa-gap, 6px); margin:0; padding:0; list-style:none; }
	.ksom-quick-access-menu--desktop li { margin:0; padding:0; }
	.ksom-quick-access-menu--desktop a {
		display:flex;
		align-items:center;
		justify-content:center;
		min-height:var(--ksom-qa-size, 46px);
		padding:0;
		border-radius:calc(var(--ksom-qa-radius, 16px) - 5px);
		color:var(--ksom-qa-icon, #253d54);
		text-decoration:none;
		white-space:nowrap;
		transition:background-color .2s ease,color .2s ease;
	}
	.ksom-quick-access-rail.is-expanded .ksom-quick-access-menu--desktop a { justify-content:flex-start; padding:0 12px; }
	.ksom-quick-access-menu--desktop a:hover,
	.ksom-quick-access-menu--desktop a:focus-visible,
	.ksom-quick-access-menu--desktop .current-menu-item > a { background:var(--ksom-qa-hover-bg, rgba(50,101,105,.12)); color:var(--ksom-qa-hover-icon, #326569); }
	.ksom-quick-access-menu--desktop a:hover .ksom-menu-icon,
	.ksom-quick-access-menu--desktop a:focus-visible .ksom-menu-icon,
	.ksom-quick-access-menu--desktop .current-menu-item > a .ksom-menu-icon { color:var(--ksom-qa-hover-icon, #326569) !important; }
	.ksom-quick-access-menu--desktop .ksom-menu-label { display:flex; align-items:center; gap:0; min-width:0; }
	.ksom-quick-access-rail.is-expanded .ksom-quick-access-menu--desktop .ksom-menu-label { gap:13px; }
	.ksom-quick-access-menu--desktop .ksom-menu-icon { width:22px; flex:0 0 22px; margin:0; text-align:center; color:inherit; }
	.ksom-quick-access-menu--desktop .ksom-menu-label__text { max-width:0; overflow:hidden; opacity:0; transition:opacity .15s ease; }
	.ksom-quick-access-rail.is-expanded .ksom-menu-label__text { max-width:none; opacity:1; }
	/* Schickes Hover-Tooltip an der eingeklappten Rail (wie am KI-Dock). */
	.ksom-quick-access-rail:not(.is-expanded) .ksom-quick-access-menu--desktop a { position:relative; }
	.ksom-quick-access-rail:not(.is-expanded) .ksom-quick-access-menu--desktop a:hover .ksom-menu-label__text,
	.ksom-quick-access-rail:not(.is-expanded) .ksom-quick-access-menu--desktop a:focus-visible .ksom-menu-label__text {
		position:absolute;
		left:calc(100% + 14px);
		top:50%;
		transform:translateY(-50%);
		max-width:none;
		opacity:1;
		white-space:nowrap;
		padding:7px 12px;
		border-radius:9px;
		background:#253d54;
		color:#fff;
		font-family:'Yantramanav Regular','Yantramanav Light','Yantramanav',sans-serif;
		font-size:13px;
		line-height:1;
		box-shadow:0 8px 22px rgba(37,61,84,.28);
		pointer-events:none;
		z-index:20;
	}
	.ksom-quick-access-rail:not(.is-expanded) .ksom-quick-access-menu--desktop a:hover .ksom-menu-label__text::before,
	.ksom-quick-access-rail:not(.is-expanded) .ksom-quick-access-menu--desktop a:focus-visible .ksom-menu-label__text::before {
		content:"";
		position:absolute;
		right:100%;
		top:50%;
		transform:translateY(-50%);
		border:6px solid transparent;
		border-right-color:#253d54;
	}
	/* Position: links (Default) oder rechts — Abstand kommt je Seite aus --ksom-qa-offx. */
	.ksom-quick-access-rail[data-ksom-qa-position="right"] { left:auto; right:var(--ksom-qa-offx, 12px); }
	.ksom-quick-access-rail[data-ksom-qa-position="right"]:not(.is-expanded) .ksom-quick-access-menu--desktop a:hover .ksom-menu-label__text,
	.ksom-quick-access-rail[data-ksom-qa-position="right"]:not(.is-expanded) .ksom-quick-access-menu--desktop a:focus-visible .ksom-menu-label__text { left:auto; right:calc(100% + 14px); }
	.ksom-quick-access-rail[data-ksom-qa-position="right"]:not(.is-expanded) .ksom-quick-access-menu--desktop a:hover .ksom-menu-label__text::before,
	.ksom-quick-access-rail[data-ksom-qa-position="right"]:not(.is-expanded) .ksom-quick-access-menu--desktop a:focus-visible .ksom-menu-label__text::before { right:auto; left:100%; border-right-color:transparent; border-left-color:#253d54; }
	/* Schnellzugriff folgt demselben persistenten Farbmodus wie Overlay und KI-Dock. */
	html.ksom-dark-mode .ksom-quick-access-rail,
	html[data-ksom-theme="dark"] .ksom-quick-access-rail {
		background:#16222c;
		border-color:#2a3b48;
		color:#cfe0da;
		box-shadow:0 8px 26px rgba(0,0,0,.38);
	}
	html.ksom-dark-mode .ksom-quick-access-rail__toggle,
	html.ksom-dark-mode .ksom-quick-access-menu--desktop a,
	html[data-ksom-theme="dark"] .ksom-quick-access-rail__toggle,
	html[data-ksom-theme="dark"] .ksom-quick-access-menu--desktop a { color:#cfe0da; }
	html.ksom-dark-mode .ksom-quick-access-rail__toggle:hover,
	html.ksom-dark-mode .ksom-quick-access-rail__toggle:focus-visible,
	html.ksom-dark-mode .ksom-quick-access-menu--desktop a:hover,
	html.ksom-dark-mode .ksom-quick-access-menu--desktop a:focus-visible,
	html.ksom-dark-mode .ksom-quick-access-menu--desktop .current-menu-item > a,
	html[data-ksom-theme="dark"] .ksom-quick-access-rail__toggle:hover,
	html[data-ksom-theme="dark"] .ksom-quick-access-menu--desktop a:hover,
	html[data-ksom-theme="dark"] .ksom-quick-access-menu--desktop .current-menu-item > a {
		background:#326569;
		color:#fff;
	}
}