/* ==========================================================================
	citelayer® Theme — Haupt-Stylesheet
	Kombiniert: color-tokens.css + theme.css + dark-mode.css
	========================================================================== */

/* ==========================================================================
	COLOR TOKENS — Material Design 3
	========================================================================== */

:root {
	/*
	 * Primäre Lila-Töne.
	 */
	--palette-primary-0: #000000;
	--palette-primary-10: #21005D;
	--palette-primary-20: #371E73;
	--palette-primary-30: #4F378B;
	--palette-primary-40: #6750A4;
	--palette-primary-50: #7F67BE;
	--palette-primary-60: #9A80D9;
	--palette-primary-70: #B69DF8;
	--palette-primary-80: #D0BCFF;
	--palette-primary-90: #EADDFF;
	--palette-primary-95: #F6EEFF;
	--palette-primary-99: #FFFBFF;
	--palette-primary-100: #FFFFFF;
	--edd-cart-preview-color-message-light: #D0BCFF;
	--edd-cart-preview-color-message: #7F67BE;

	/*

	 * Sekundäre Mauve-Töne.

	 */
	--palette-secondary-10: #1D192B;
	--palette-secondary-20: #332D41;
	--palette-secondary-30: #4A4458;
	--palette-secondary-40: #625B71;
	--palette-secondary-60: #958DA5;
	--palette-secondary-80: #CCC2DC;
	--palette-secondary-90: #E8DEF8;
	--palette-secondary-99: #FFFBFF;
	--palette-secondary-100: #FFFFFF;

	/*

	 * Tertiäre Amber-Orange-Töne (Prism-Strahl).

	 */
	--palette-tertiary-10: #2E1500;
	--palette-tertiary-20: #4E2600;
	--palette-tertiary-30: #6E3A00;
	--palette-tertiary-40: #8C4A1F;
	--palette-tertiary-60: #C4773F;
	--palette-tertiary-80: #FFB787;
	--palette-tertiary-90: #FFDCC2;
	--palette-tertiary-95: #FFEDE4;
	--edd-cart-preview-color-primary: #C4773F;

	/*

	 * Neutrale Töne.

	 */
	--palette-neutral-10: #1C1B1F;
	--palette-neutral-20: #313033;
	--palette-neutral-30: #48464C;
	--palette-neutral-40: #605D64;
	--palette-neutral-80: #CAC4D0;
	--palette-neutral-90: #E6E1E5;
	--palette-neutral-95: #F4EFF4;
	--palette-neutral-99: #FFFBFE;

	/*

	 * Neutral-Variant-Töne.

	 */
	--palette-neutral-variant-30: #49454F;
	--palette-neutral-variant-50: #79747E;
	--palette-neutral-variant-60: #938F99;
	--palette-neutral-variant-80: #CAC4D0;
	--palette-neutral-variant-90: #E7E0EC;

	/*

	 * Fehler-Töne.

	 */
	--palette-error-40: #B3261E;
	--palette-error-80: #F2B8B5;
	--palette-error-90: #F9DEDC;
}

/*

 * LIGHT MODE (Standard).

 */
:root,
[data-theme="light"],
.light {
	color-scheme: light;

	--md-primary: #6750A4;
	--md-on-primary: #FFFFFF;
	--md-primary-container: #EADDFF;
	--md-on-primary-container: #21005D;
	--md-primary-fixed-dim: #D0BCFF;
	--md-on-primary-fixed-variant: #4F378B;

	--md-secondary: #625B71;
	--md-on-secondary: #FFFFFF;
	--md-secondary-container: #E8DEF8;
	--md-on-secondary-container: #1D192B;

	--md-tertiary: #8C4A1F;
	--md-on-tertiary: #FFFFFF;
	--md-tertiary-container: #FFDCC2;
	--md-on-tertiary-container: #2E1500;

	--md-error: #B3261E;
	--md-on-error: #FFFFFF;
	--md-error-container: #F9DEDC;
	--md-on-error-container: #410E0B;

	--md-surface-dim: #DDD8E1;
	--md-surface: #FFFBFE;
	--md-surface-bright: #FFFBFE;
	--md-surface-container-lowest: #FFFFFF;
	--md-surface-container-low: #F7F2FA;
	--md-surface-container: #F3EDF7;
	--md-surface-container-high: #ECE6F0;
	--md-surface-container-highest: #E6E0E9;
	--md-on-surface: #1C1B1F;
	--md-on-surface-variant: #49454F;

	--md-outline: #79747E;
	--md-outline-variant: #CAC4D0;

	--md-background: #FFFBFE;
	--md-on-background: #1C1B1F;

	--md-inverse-surface: #313033;
	--md-inverse-on-surface: #F4EFF4;
	--md-inverse-primary: #D0BCFF;

	--md-scrim: #000000;
	--md-shadow: #000000;

	--citelayer-orange: #E19054;
	--citelayer-orange-bright: #FFB787;
	--citelayer-orange-dim: #8C4A1F;
	--citelayer-prism-layer1: #6750A4;
	--citelayer-prism-layer2: #9A80D9;
	--citelayer-prism-layer3: #CCC2DC;

	--nav-bg: rgba(255, 251, 254, 0.66);
	--nav-border: rgba(202, 196, 208, 0.45);

	--section-alt-bg: #F7F2FA;
	--section-divider: #E6E1E5;

	--md-elevation-1: 0 1px 2px rgba(0, 0, 0, .12), 0 1px 3px 1px rgba(0, 0, 0, .08);
	--md-elevation-2: 0 1px 2px rgba(0, 0, 0, .10), 0 2px 6px 2px rgba(0, 0, 0, .10);
	--md-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, .10), 0 1px 3px rgba(0, 0, 0, .12);
	--md-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, .10), 0 2px 3px rgba(0, 0, 0, .14);
	--md-elevation-5: 0 8px 12px 6px rgba(0, 0, 0, .10), 0 4px 4px rgba(0, 0, 0, .14);

	--md-surface-tint: #6750A4;
	--md-surface-tint-5: color-mix(in srgb, #6750A4 5%, transparent);
	--md-surface-tint-8: color-mix(in srgb, #6750A4 8%, transparent);
	--md-surface-tint-11: color-mix(in srgb, #6750A4 11%, transparent);
	--md-surface-tint-12: color-mix(in srgb, #6750A4 12%, transparent);
	--md-surface-tint-14: color-mix(in srgb, #6750A4 14%, transparent);

	--gradient-hero:
		radial-gradient(ellipse 70% 55% at 15% 25%, #EADDFF 0%, transparent 65%),
		radial-gradient(ellipse 55% 45% at 85% 75%, rgba(255, 220, 194, 0.7) 0%, transparent 60%),
		radial-gradient(ellipse 40% 40% at 75% 15%, rgba(208, 188, 255, 0.3) 0%, transparent 50%),
		#FFFBFE;
}

/*

 * DARK MODE.

 */
[data-theme="dark"],
.dark {
	color-scheme: dark;

	--md-primary: #D0BCFF;
	--md-on-primary: #371E73;
	--md-primary-container: #4F378B;
	--md-on-primary-container: #EADDFF;
	--md-primary-fixed-dim: #D0BCFF;
	--md-on-primary-fixed-variant: #4F378B;

	--md-secondary: #CCC2DC;
	--md-on-secondary: #332D41;
	--md-secondary-container: #4A4458;
	--md-on-secondary-container: #E8DEF8;

	--md-tertiary: #FFB787;
	--md-on-tertiary: #4E2600;
	--md-tertiary-container: #6E3A00;
	--md-on-tertiary-container: #FFDCC2;

	--md-error: #F2B8B5;
	--md-on-error: #601410;
	--md-error-container: #8C1D18;
	--md-on-error-container: #F9DEDC;

	--md-surface-dim: #141218;
	--md-surface: #141218;
	--md-surface-bright: #3B383E;
	--md-surface-container-lowest: #0F0D13;
	--md-surface-container-low: #1D1B20;
	--md-surface-container: #211F26;
	--md-surface-container-high: #2B2930;
	--md-surface-container-highest: #36343B;
	--md-on-surface: #E6E1E5;
	--md-on-surface-variant: #CAC4D0;

	--md-outline: #938F99;
	--md-outline-variant: #49454F;

	--md-background: #141218;
	--md-on-background: #E6E1E5;

	--md-inverse-surface: #E6E1E5;
	--md-inverse-on-surface: #313033;
	--md-inverse-primary: #6750A4;

	--citelayer-orange: #FFB787;
	--citelayer-orange-bright: #FFDCC2;
	--citelayer-orange-dim: #E19054;
	--citelayer-prism-layer1: #D0BCFF;
	--citelayer-prism-layer2: #9A80D9;
	--citelayer-prism-layer3: #625B71;

	--nav-bg: rgba(21, 19, 27, 0.6);
	--nav-border: rgba(73, 69, 79, 0.55);

	--section-alt-bg: #1D1B20;
	--section-divider: #36343B;

	--md-elevation-1: 0 1px 3px 1px rgba(0, 0, 0, .30), 0 1px 2px rgba(0, 0, 0, .30);
	--md-elevation-2: 0 2px 6px 2px rgba(0, 0, 0, .30), 0 1px 2px rgba(0, 0, 0, .30);
	--md-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, .30), 0 1px 3px rgba(0, 0, 0, .30);
	--md-elevation-4: 0 6px 10px 4px rgba(0, 0, 0, .30), 0 2px 3px rgba(0, 0, 0, .30);
	--md-elevation-5: 0 8px 12px 6px rgba(0, 0, 0, .30), 0 4px 4px rgba(0, 0, 0, .30);

	--md-surface-tint: #D0BCFF;
	--md-surface-tint-5: color-mix(in srgb, #D0BCFF 5%, transparent);
	--md-surface-tint-8: color-mix(in srgb, #D0BCFF 8%, transparent);
	--md-surface-tint-11: color-mix(in srgb, #D0BCFF 11%, transparent);
	--md-surface-tint-12: color-mix(in srgb, #D0BCFF 12%, transparent);
	--md-surface-tint-14: color-mix(in srgb, #D0BCFF 14%, transparent);

	--gradient-hero:
		radial-gradient(ellipse 80% 60% at 20% 20%, #2D1F4A 0%, transparent 60%),
		radial-gradient(ellipse 60% 40% at 80% 80%, #3D2000 0%, transparent 55%),
		radial-gradient(ellipse 50% 50% at 50% 50%, #1C1B1F 0%, #141218 100%);
}

/*

 * SEMANTISCHE ALIASES.

 */
:root {
	--btn-filled-bg: var(--md-primary);
	--btn-filled-fg: var(--md-on-primary);
	--btn-tonal-bg: var(--md-secondary-container);
	--btn-tonal-fg: var(--md-on-secondary-container);
	--btn-outlined-border: var(--md-outline);
	--btn-outlined-fg: var(--md-primary);

	--card-bg: var(--md-surface-container);
	--card-border: var(--md-outline-variant);
	--card-elevated-bg: var(--md-surface-container-low);

	--font-display: 'Google Sans', 'Roboto', system-ui, sans-serif;
	--font-body: 'Roboto', system-ui, sans-serif;
	--font-mono: 'Roboto Mono', monospace;

	/*

	 * Type Scale — Material Design 3 (aus Component Sheet).

	 */
	--type-display-large: 57px;
	--type-display-medium: 45px;
	--type-display-small: 36px;
	--type-headline-large: 32px;
	--type-headline-medium: 28px;
	--type-headline-small: 24px;
	--type-title-large: 22px;
	--type-title-medium: 16px;
	--type-title-small: 14px;
	--type-body-large: 16px;
	--type-body-medium: 14px;
	--type-body-small: 12px;
	--type-label-large: 14px;
	--type-label-medium: 12px;
	--type-label-small: 11px;

	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-30: 120px;
	--space-40: 160px;

	--radius-none: 0px;
	--radius-xs: 4px;
	--radius-s: 8px;
	--radius-m: 12px;
	--radius-l: 16px;
	--radius-xl: 28px;
	--radius-full: 999px;

	--gradient-prism-beam:
		linear-gradient(135deg, #FFB787 0%, #E19054 40%, #8C4A1F 100%);
	--gradient-primary-soft:
		linear-gradient(135deg, #EADDFF 0%, #D0BCFF 50%, #B69DF8 100%);
}

:root :where(.is-layout-constrained)>* {
	margin-block-start: auto;
}

/* ==========================================================================
	BASE RESET & GLOBAL (aus theme.css)
	========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--md-on-background);
	background-color: var(--md-background);
	transition: background-color .3s ease, color .3s ease;
	overflow-x: hidden;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: var(--md-primary);
}

.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:active,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:hover,
.wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor:visited {
	color: var(--md-on-surface-variant);
	fill: var(--md-on-surface-variant);
}

ul {
	list-style: none;
}

.material-symbols-outlined {
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	line-height: 1;
	vertical-align: middle;
	user-select: none;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/*

 * LAYOUT-HELFER.

 */
.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.container-narrow {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 24px;
}

.cl-wider-container {
	max-width: 1600px;
}

.section {
	padding: var(--space-20) 0;
}

.section-alt {
	background: var(--section-alt-bg);
}

.section-eyebrow {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--md-primary);
	margin-bottom: var(--space-2);
}

.section-headline {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 3vw + .5rem, 2.5rem);
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.2;
	color: var(--md-on-surface);
	margin-bottom: var(--space-4);
}

.section-body {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--md-on-surface-variant);
	max-width: 580px;
}

.section-body-centered {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.section-header-centered {
	text-align: center;
}

.section-header-centered .section-body {
	margin: 0 auto;
}

section#how-it-works {
	display: relative;
	z-index: 0;
}

/*

 * BUTTON-SYSTEM.

 */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 12px 24px;
	border: none;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .04em;
	cursor: pointer;
	text-decoration: none;
	transition: all .25s cubic-bezier(0.2, 0, 0, 1);
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

.btn::after {
	content: '';
	position: absolute;
	inset: 0;
	background: currentColor;
	opacity: 0;
	transition: opacity .15s ease;
	border-radius: inherit;
}

.btn:hover::after {
	opacity: .08;
}

.btn:active::after {
	opacity: .12;
}

.btn:active {
	transform: scale(.98);
}

.btn:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
}

.btn-filled {
	background: var(--md-primary);
	color: var(--md-on-primary);
	box-shadow: var(--md-elevation-1);
}

.btn-filled:hover {
	box-shadow: var(--md-elevation-2);
	transform: translateY(-1px);
	color: var(--md-on-primary);
}

.btn-filled {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 0 var(--space-6);
	font-family: var(--font-body);
	font-size: var(--type-label-large);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--md-on-primary);
	background: var(--md-primary);
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	text-decoration: none;
	transition: box-shadow 0.2s ease, transform 0.1s ease;
	box-shadow: var(--md-elevation-1);
}

.btn.cl-nav-cta {
	height: 40px;
}

.btn-filled:hover {
	box-shadow: var(--md-elevation-2);
}

.btn-filled:active {
	transform: scale(0.98);
}

.btn-filled .material-symbols-outlined {
	font-size: 18px;
}

.btn-tonal {
	background: var(--md-secondary-container);
	color: var(--md-on-secondary-container);
}

.btn-tonal:hover {
	transform: translateY(-1px);
	color: var(--md-on-secondary-container);
}

.btn-outlined {
	background: transparent;
	color: var(--md-primary);
	border: 1.5px solid var(--md-outline);
}

.btn-outlined:hover {
	color: var(--md-primary);
}

.btn-lg {
	padding: 14px 28px;
	font-size: 15px;
}

.btn-sm {
	padding: 8px 16px;
	font-size: 13px;
}

/*

 * NAVIGATION.

 */
.cl-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	height: 64px;
	display: flex;
	align-items: center;
	padding: 0 24px;
	background: var(--nav-bg);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-bottom: 1px solid var(--nav-border);
	transition: background .3s ease;
}

.cl-nav-inner {
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.cl-nav-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--md-on-surface);
	flex-shrink: 0;
}

.cl-nav-logo:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
	border-radius: var(--radius-s);
}

.cl-nav-logo-icon {
	width: 32px;
	height: 32px;
}

.cl-nav-logo-text {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--md-on-surface);
}

.cl-nav-logo-text sup {
	font-size: 9px;
	font-weight: 500;
	color: var(--md-on-surface-variant);
	letter-spacing: 0;
}

.cl-nav-links {
	display: flex;
	align-items: center;
	gap: 2px;
}

.cl-nav-link {
	display: block;
	padding: 8px 14px;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface-variant);
	text-decoration: none;
	transition: background .2s, color .2s;
}

.cl-nav-link:hover {
	background: color-mix(in srgb, var(--md-primary) 8%, transparent);
	color: var(--md-primary);
}

.cl-nav-link:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
}

/* WordPress Navigation Block Links (Desktop)
	Der wp:navigation Block rendert Links als .wp-block-navigation-item__content
	statt .cl-nav-link — diese Styles spiegeln das Design-Reference wider. */
.cl-nav-links .wp-block-navigation-item__content {
	display: block;
	padding: 8px 14px;
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface-variant);
	text-decoration: none;
	transition: background .2s, color .2s;
}

.cl-nav-links .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--md-primary) 8%, transparent);
	color: var(--md-primary);
}

.cl-nav-links .wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
}

/*

 * Aktiver Menüpunkt (WP Block — Desktop).

 */
.cl-nav-links .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.cl-nav-links .wp-block-navigation-item.is-current-page .wp-block-navigation-item__content,
.cl-nav-links .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content {
	background: color-mix(in srgb, var(--md-primary) 12%, transparent);
	color: var(--md-primary);
}

/*

 * Navigation Block Container — Gap zwischen Links.

 */
.cl-nav-links.wp-block-navigation .wp-block-navigation__container {
	gap: 2px;
}

.cl-nav-right {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.cl-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-full);
	border: 1.5px solid var(--md-outline-variant);
	background: transparent;
	color: var(--md-on-surface-variant);
	cursor: pointer;
	transition: all .2s;
}

.cl-theme-toggle:hover {
	background: color-mix(in srgb, var(--md-primary) 8%, transparent);
	border-color: var(--md-primary);
	color: var(--md-primary);
}

.cl-theme-toggle:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
}

.cl-theme-toggle .icon-sun {
	display: none;
}

.cl-theme-toggle .icon-moon {
	display: block;
}

[data-theme="dark"] .cl-theme-toggle .icon-sun {
	display: block;
}

[data-theme="dark"] .cl-theme-toggle .icon-moon {
	display: none;
}

.cl-nav-hamburger {
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	border-radius: var(--radius-s);
	min-width: 44px;
	min-height: 44px;
}

.cl-nav-hamburger:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
}

.cl-nav-hamburger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--md-on-surface);
	border-radius: 2px;
	transition: all .25s;
}

.cl-nav-hamburger.open span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.cl-nav-hamburger.open span:nth-child(2) {
	opacity: 0;
}

.cl-nav-hamburger.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/*

 * Mobile Menü Container - Basis-Styles.

 */
.cl-nav-mobile {
	display: none;
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	z-index: 199;
	background: var(--md-surface-container-low);
	border-bottom: 1px solid var(--md-outline-variant);
	padding: var(--space-4) var(--space-6);
	flex-direction: column;
	gap: var(--space-2);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
}

/*

 * Geöffnetes Menü.

 */
.cl-nav-mobile.open {
	display: flex;
}

/*

 * Legacy .cl-nav-link Styles (für HTML-Links, nicht WP-Blocks).

 */
.cl-nav-mobile .cl-nav-link {
	display: block;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-decoration: none;
	border-radius: var(--radius-m);
	transition: background .2s, color .2s;
}

.cl-nav-mobile .cl-nav-link:hover {
	background: color-mix(in srgb, var(--md-primary) 8%, transparent);
	color: var(--md-primary);
}

.cl-nav-mobile .btn {
	width: 100%;
	justify-content: center;
	margin-top: var(--space-2);
}

@media (max-width: 900px) {

	/*

	 * Desktop Navigation ausblenden - mit Spezifität für WP Blocks.

	 */
	.cl-nav-links,
	.cl-nav-links.wp-block-navigation,
	nav.cl-nav-links.wp-block-navigation {
		display: none !important;
	}

	.cl-nav-cta {
		display: none;
	}

	.cl-nav-hamburger {
		display: flex;
	}
}

@media (max-width: 480px) {
	.cl-nav {
		padding: 0 16px;
	}
}

.cl-nav+* {
	margin-top: 0;
}

/* WordPress-Menü-Integration
	========================================================================== */

.cl-nav-links .menu-item {
	display: flex;
	align-items: center;
}

.cl-nav-links .menu-item-has-children {
	position: relative;
}

/*

 * Aktiver Menüpunkt (Server-seitig via WordPress) - Als Pill dargestellt.

 */
.cl-nav-links .current-menu-item>a,
.cl-nav-links .is-current-page>a,
.cl-nav-links .current_page_item>a,
.cl-nav-links .current-menu-parent>a,
.cl-nav-links .is-current-page-ancestor>a,
.cl-nav-links .current_page_parent>a {
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
	border-radius: var(--radius-full);
	padding: 8px 16px;
}

/*

 * Sub-Menü (Dropdown, depth: 2).

 */
.cl-nav-links .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: flex;
	flex-direction: column;
	min-width: 200px;
	padding: var(--space-2);
	background: var(--md-surface-container);
	border-radius: var(--radius-m);
	box-shadow: var(--md-elevation-2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity .2s, transform .2s, visibility .2s;
}

.cl-nav-links .menu-item-has-children:hover>.sub-menu,
.cl-nav-links .menu-item-has-children:focus-within>.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cl-nav-links .sub-menu .cl-nav-link {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-s);
	font-size: 13px;
	white-space: nowrap;
}

/* ==========================================================================
	MOBILE NAVIGATION - WordPress Block Theme Fixes
	========================================================================== */

/*

 * Mobile Menü Container - standardmäßig versteckt.

 */
.cl-nav-mobile {
	display: none;
}

/*

 * Wenn geöffnet: als Flexbox anzeigen (hohe Spezifität für Block-Theme).

 */
.cl-nav-mobile.open,
.cl-nav-mobile.open#cl-nav-mobile {
	display: flex !important;
	flex-direction: column;
}

/*

 * WordPress Navigation Block im mobilen Menü - vertikal anordnen.

 */
.cl-nav-mobile .cl-nav-mobile-menu,
.cl-nav-mobile .cl-nav-mobile-menu.wp-block-navigation,
.cl-nav-mobile nav.cl-nav-mobile-menu.wp-block-navigation {
	display: flex;
	flex-direction: column !important;
	width: 100%;
}

/*

 * Die eigentliche Menü-Liste (ul) im WordPress Block.

 */
.cl-nav-mobile .cl-nav-mobile-menu .wp-block-navigation__container,
.cl-nav-mobile .cl-nav-mobile-menu ul.wp-block-page-list,
.cl-nav-mobile .cl-nav-mobile-menu ul {
	display: flex !important;
	flex-direction: column !important;
	gap: var(--space-2);
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*

 * Einzelne Menü-Items.

 */
.cl-nav-mobile .cl-nav-mobile-menu .wp-block-navigation-item,
.cl-nav-mobile .cl-nav-mobile-menu li {
	display: block;
	width: 100%;
}

/*

 * Links in mobilen Menü-Items.

 */
.cl-nav-mobile .cl-nav-mobile-menu .wp-block-navigation-item a,
.cl-nav-mobile .cl-nav-mobile-menu li a,
.cl-nav-mobile .wp-block-navigation .wp-block-navigation-item__content {
	display: block;
	padding: 12px 16px;
	font-size: 16px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-decoration: none;
	border-radius: var(--radius-m);
	transition: background .2s, color .2s;
}

/*

 * Hover/Active States für mobile Links.

 */
.cl-nav-mobile .cl-nav-mobile-menu .wp-block-navigation-item a:hover,
.cl-nav-mobile .cl-nav-mobile-menu li a:hover,
.cl-nav-mobile .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: color-mix(in srgb, var(--md-primary) 8%, transparent);
	color: var(--md-primary);
}

/*

 * Aktiver Menüpunkt.

 */
/*
 * Aktiver Menüpunkt im mobilen Menü - Als Pill dargestellt.
 */
.cl-nav-mobile .cl-nav-mobile-menu .current-menu-item a,
.cl-nav-mobile .cl-nav-mobile-menu .is-current-page a,
.cl-nav-mobile .cl-nav-mobile-menu .current_page_item a,
.cl-nav-mobile .cl-nav-mobile-menu .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content,
.cl-nav-mobile .cl-nav-mobile-menu .wp-block-navigation-item.is-current-page .wp-block-navigation-item__content,
.cl-nav-mobile .cl-nav-mobile-menu .wp-block-navigation-item.current_page_item .wp-block-navigation-item__content {
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
	border-radius: var(--radius-full);
}

/*

 * Sub-Menü im mobilen Menü.

 */
.cl-nav-mobile .cl-nav-mobile-menu .sub-menu,
.cl-nav-mobile .cl-nav-mobile-menu .wp-block-navigation__submenu-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding-left: var(--space-4);
	margin-top: var(--space-1);
}

/*

 * Fallback: Verstecke mobile Navigation wenn nicht geöffnet.

 */
.cl-nav-mobile:not(.open) .cl-nav-mobile-menu,
.cl-nav-mobile:not(.open) .cl-nav-mobile-menu.wp-block-navigation {
	display: none !important;
}

/* ==========================================================================
	404 ERROR PAGE
	========================================================================== */

.error-main {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100vh - 64px);
	padding: var(--space-12) var(--space-6);
	padding-top: calc(64px + var(--space-12));
	background:
		radial-gradient(ellipse 60% 40% at 20% 30%, color-mix(in srgb, var(--md-primary-container) 60%, transparent) 0%, transparent 60%),
		radial-gradient(ellipse 40% 30% at 80% 70%, color-mix(in srgb, var(--md-tertiary-container) 50%, transparent) 0%, transparent 55%),
		var(--md-surface);
}

.error-container {
	text-align: center;
	max-width: 560px;
	width: 100%;
}

/*

 * Prism Icon.

 */
.error-icon-wrap {
	width: 120px;
	height: 120px;
	margin: 0 auto var(--space-8);
	background: var(--md-surface-container);
	border: 2px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 12px rgba(103, 80, 164, 0.08);
}

.error-icon-prism {
	width: 64px;
	height: 64px;
}

/*

 * Error Code.

 */
.error-code {
	font-family: var(--font-mono);
	font-size: var(--type-body-small, 12px);
	font-weight: 500;
	color: var(--md-on-surface-variant);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: var(--space-4);
	opacity: 0.7;
}

/*

 * Headline.

 */
.error-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 5vw, 36px);
	font-weight: 700;
	color: var(--md-on-surface);
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: var(--space-4);
}

/*

 * Description.

 */
.error-desc {
	font-size: var(--type-body-large, 16px);
	color: var(--md-on-surface-variant);
	line-height: 1.6;
	margin-bottom: var(--space-8);
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
}

/*

 * Action Buttons.

 */
.error-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
	margin-bottom: var(--space-10);
}

.error-actions .btn .material-symbols-outlined {
	font-size: 18px;
	font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
}

/*

 * Divider "oder".

 */
.error-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	color: var(--md-on-surface-variant);
	font-size: var(--type-body-medium, 14px);
}

.error-divider::before,
.error-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--md-outline-variant);
	max-width: 80px;
}

/*

 * Alternative Links.

 */
.error-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	justify-content: center;
}

.error-link {
	font-size: var(--type-body-medium, 14px);
	color: var(--md-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.15s ease;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
}

.error-link:hover {
	color: var(--citelayer-orange);
}

.error-link .material-symbols-outlined {
	font-size: 16px;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/*

 * Responsive.

 */
@media (max-width: 600px) {
	.error-main {
		padding: var(--space-8) var(--space-4);
	}

	.error-icon-wrap {
		width: 96px;
		height: 96px;
	}

	.error-icon-prism {
		width: 48px;
		height: 48px;
	}

	.error-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.error-actions .btn {
		width: 100%;
	}

	.error-links {
		flex-direction: column;
		gap: var(--space-3);
	}
}

/* ==========================================================================
	SEARCH RESULTS PAGE
	========================================================================== */

/*

 * Search Header.

 */
.search-header {
	background:
		radial-gradient(ellipse 50% 40% at 15% 40%, var(--md-primary-container) 0%, transparent 60%),
		radial-gradient(ellipse 40% 30% at 85% 60%, var(--md-tertiary-container) 0%, transparent 55%),
		var(--md-surface-container-low);
	border-bottom: 1px solid var(--md-outline-variant);
	padding: var(--space-12) var(--space-6) var(--space-8);
	padding-top: calc(64px + var(--space-12));
}

.search-header-inner {
	max-width: 800px;
	margin: 0 auto;
}

.search-title {
	font-family: var(--font-display);
	font-size: clamp(24px, 4vw, 32px);
	font-weight: 700;
	color: var(--md-on-surface);
	letter-spacing: -0.01em;
	margin-bottom: var(--space-6);
	line-height: 1.3;
}

.search-title .query {
	color: var(--md-primary);
}

/*

 * Search Form.

 */
.search-form {
	position: relative;
	margin-bottom: var(--space-4);
}

.search-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.search-icon {
	position: absolute;
	left: var(--space-4);
	color: var(--md-on-surface-variant);
	font-size: 24px;
	pointer-events: none;
}

.search-input {
	width: 100%;
	height: 56px;
	padding: 0 var(--space-6) 0 52px;
	font-family: var(--font-body);
	font-size: var(--type-body-large);
	color: var(--md-on-surface);
	background: var(--md-surface);
	border: 1px solid var(--md-outline);
	border-radius: var(--radius-l);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-input:hover {
	border-color: var(--md-on-surface-variant);
}

.search-input:focus {
	outline: none;
	border-color: var(--md-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--md-primary) 12%, transparent);
}

.search-input::placeholder {
	color: var(--md-on-surface-variant);
}

.search-submit {
	position: absolute;
	right: var(--space-2);
	height: 40px;
	padding: 0 var(--space-5);
	font-family: var(--font-body);
	font-size: var(--type-label-large);
	font-weight: 500;
	letter-spacing: 0.06em;
	color: var(--md-on-primary);
	background: var(--md-primary);
	border: none;
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.search-submit:hover {
	box-shadow: var(--md-elevation-1);
}

.search-submit:active {
	transform: scale(0.98);
}

/*

 * Results Count.

 */
.results-count {
	font-size: var(--type-body-medium);
	color: var(--md-on-surface-variant);
}

.results-count .highlight {
	color: var(--md-on-surface);
	font-weight: 500;
}

/*

 * Filter Bar.

 */
.filter-bar {
	background: var(--md-surface-container);
	border-bottom: 1px solid var(--md-outline-variant);
	padding: var(--space-4) var(--space-6);
	position: sticky;
	top: 0;
	z-index: 10;
}

.filter-bar-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
	justify-content: space-between;
}

.filter-group {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.filter-label {
	font-size: var(--type-label-medium);
	font-weight: 500;
	color: var(--md-on-surface-variant);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.filter-select {
	appearance: none;
	-webkit-appearance: none;
	height: 40px;
	padding: 0 40px 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--type-body-medium);
	color: var(--md-on-surface);
	background: var(--md-surface);
	border: 1px solid var(--md-outline);
	border-radius: var(--radius-s);
	cursor: pointer;
	transition: border-color 0.15s ease;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%236750A4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 8px center;
	background-size: 18px;
}

.filter-select:hover {
	border-color: var(--md-on-surface-variant);
}

.filter-select:focus {
	outline: none;
	border-color: var(--md-primary);
}

/*

 * Main Content.

 */
.search-main {
	flex: 1;
	padding: var(--space-8) var(--space-6);
	min-height: calc(100vh - 300px);
}

.search-inner {
	max-width: 1200px;
	margin: 0 auto;
}

/*

 * Results Grid — M3 Cards.

 */
.results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
	gap: var(--space-6);
	margin-bottom: var(--space-10);
}

.result-card {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-6);
	transition: box-shadow 0.2s ease, transform 0.15s ease;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}

.result-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--md-primary), var(--md-primary) 0%, transparent 0%);
	transition: background 0.3s ease;
}

.result-card:hover {
	box-shadow: var(--md-elevation-2);
	transform: translateY(-2px);
}

.result-card:hover::before {
	background: linear-gradient(90deg, var(--md-primary), var(--citelayer-orange));
}

.result-category {
	font-size: var(--type-label-medium);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--md-primary);
	margin-bottom: var(--space-2);
}

.result-title {
	font-family: var(--font-display);
	font-size: var(--type-title-large);
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-3);
	line-height: 1.3;
	letter-spacing: -0.01em;
}

.result-title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.result-title a:hover {
	color: var(--md-primary);
}

.result-excerpt {
	font-size: var(--type-body-medium);
	color: var(--md-on-surface-variant);
	line-height: 1.6;
	margin-bottom: var(--space-4);
	flex: 1;
}

.highlight-term {
	background: var(--md-tertiary-container);
	color: var(--md-on-tertiary-container);
	padding: 0 4px;
	border-radius: var(--radius-xs);
	font-weight: 500;
}

.result-meta {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--md-outline-variant);
}

.result-date {
	font-size: var(--type-body-small);
	color: var(--md-on-surface-variant);
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

.result-date .material-symbols-outlined {
	font-size: 14px;
}

.result-link {
	margin-left: auto;
	font-size: var(--type-label-large);
	font-weight: 500;
	color: var(--md-primary);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	transition: color 0.15s ease;
}

.result-link:hover {
	color: var(--citelayer-orange);
}

.result-link .material-symbols-outlined {
	font-size: 16px;
	transition: transform 0.15s ease;
}

.result-link:hover .material-symbols-outlined {
	transform: translateX(2px);
}

/*

 * Pagination.

 */
.search-main .pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-10);
}

.pagination-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	height: 40px;
	padding: 0 var(--space-4);
	font-family: var(--font-body);
	font-size: var(--type-label-large);
	font-weight: 500;
	color: var(--md-on-surface);
	background: transparent;
	border: 1px solid var(--md-outline);
	border-radius: var(--radius-full);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s ease;
}

.pagination-btn:hover:not(:disabled) {
	background: var(--md-surface-container-high);
	border-color: var(--md-outline-variant);
}

.pagination-btn:disabled {
	opacity: 0.38;
	cursor: not-allowed;
}

.pagination-btn .material-symbols-outlined {
	font-size: 18px;
}

.pagination-numbers {
	display: flex;
	gap: var(--space-1);
}

.pagination-number {
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-body);
	font-size: var(--type-label-large);
	font-weight: 500;
	color: var(--md-on-surface-variant);
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius-full);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s ease;
}

.pagination-number:hover {
	background: var(--md-surface-container-low);
	color: var(--md-on-surface);
}

.pagination-number.active {
	background: var(--md-primary);
	color: var(--md-on-primary);
}

.pagination-info {
	font-size: var(--type-body-small);
	color: var(--md-on-surface-variant);
	margin-left: var(--space-4);
}

/*

 * No Results State.

 */
.no-results {
	text-align: center;
	padding: var(--space-16) var(--space-6);
	max-width: 600px;
	margin: 0 auto;
}

.no-results-icon {
	width: 96px;
	height: 96px;
	margin: 0 auto var(--space-6);
	background: var(--md-surface-container-low);
	border-radius: var(--radius-xl);
	display: flex;
	align-items: center;
	justify-content: center;
}

.no-results-icon .material-symbols-outlined {
	font-size: 48px;
	color: var(--md-on-surface-variant);
	opacity: 0.5;
}

.no-results-title {
	font-family: var(--font-display);
	font-size: var(--type-headline-small);
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-3);
}

.no-results-title .query {
	color: var(--md-primary);
}

.no-results-desc {
	font-size: var(--type-body-large);
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-8);
}

.alt-topics {
	margin-bottom: var(--space-8);
}

.alt-topics-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

.alt-topic-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	font-size: var(--type-body-medium);
	font-weight: 500;
	color: var(--md-primary);
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: all 0.15s ease;
}

.alt-topic-link:hover {
	background: var(--md-primary-container);
	border-color: var(--md-primary);
}

.alt-topic-link .material-symbols-outlined {
	font-size: 16px;
}

.help-section {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-6);
}

.help-title {
	font-family: var(--font-display);
	font-size: var(--type-title-large);
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-2);
}

.help-desc {
	font-size: var(--type-body-medium);
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-4);
}

/*

 * Search Responsive.

 */
@media (max-width: 768px) {
	.search-header {
		padding: var(--space-8) var(--space-4) var(--space-6);
		padding-top: calc(64px + var(--space-8));
	}

	.filter-bar {
		padding: var(--space-3) var(--space-4);
	}

	.filter-bar-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-group {
		justify-content: space-between;
	}

	.search-main {
		padding: var(--space-6) var(--space-4);
	}

	.results-grid {
		grid-template-columns: 1fr;
		gap: var(--space-4);
	}

	.search-main .pagination {
		flex-wrap: wrap;
	}

	.pagination-info {
		width: 100%;
		text-align: center;
		margin: var(--space-2) 0 0 0;
	}
}

/*

 * HERO-SEKTION.

 */
.cl-hero {
	min-height: 75vh;
	padding-top: 64px;
	display: flex;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.cl-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--gradient-hero);
	z-index: 0;
	transition: background .3s ease;
}

.cl-hero-prism-deco {
	position: absolute;
	top: 80px;
	right: -60px;
	width: 520px;
	height: 520px;
	opacity: .055;
	z-index: 0;
	pointer-events: none;
}

[data-theme="dark"] .cl-hero-prism-deco {
	opacity: .04;
}

.cl-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
	padding: var(--space-20) 24px;
}

.cl-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: 6px 14px 6px 8px;
	background: var(--md-secondary-container);
	border-radius: var(--radius-full);
	margin-bottom: var(--space-6);
	border: 1px solid color-mix(in srgb, var(--md-primary) 15%, transparent);
}

.cl-hero-badge-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--md-primary);
	animation: cl-pulse 2.2s ease-in-out infinite;
}

.cl-coming-soon-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	background: transparent;
	border: 1.5px solid var(--md-secondary-container);
	border-radius: var(--radius-full);
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	vertical-align: middle;
	margin-left: 8px;
}

@keyframes cl-pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .55;
		transform: scale(.85);
	}
}

.cl-hero-badge-text {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	color: var(--md-on-primary-container);
	letter-spacing: .05em;
	text-transform: uppercase;
}

.cl-hero-headline {
	font-family: var(--font-display);
	font-size: clamp(2.2rem, 4.5vw + .5rem, 3.8rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -.025em;
	color: var(--md-on-surface);
	margin-bottom: var(--space-4);
}

.cl-hero-headline-accent {
	background: linear-gradient(135deg, var(--citelayer-prism-layer1) 0%, var(--citelayer-prism-layer2) 50%, var(--citelayer-orange) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.cl-hero-subline {
	font-size: clamp(1rem, 1.5vw + .25rem, 1.125rem);
	line-height: 1.65;
	color: var(--md-on-surface-variant);
	max-width: 480px;
	margin-bottom: var(--space-10);
}

.cl-hero-subline strong {
	color: var(--md-on-surface);
	font-weight: 500;
}

.cl-hero-actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--space-8);
}

.cl-hero-trust {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.cl-hero-trust-item {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--md-on-surface-variant);
}

.cl-hero-trust-icon {
	width: 16px;
	height: 16px;
	color: var(--citelayer-orange);
	flex-shrink: 0;
}

.cl-hero-visual {
	position: relative;
	display: flex;
	justify-content: center;
}

.cl-hero-card-wrapper {
	position: relative;
	width: 100%;
	max-width: 460px;
}

.cl-dashboard-card {
	background: color-mix(in srgb, var(--md-surface) 92%, transparent);
	border: 1px solid color-mix(in srgb, var(--md-outline-variant) 70%, transparent);
	border-radius: 24px;
	padding: 24px;
	box-shadow: var(--md-elevation-3);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.cl-dashboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.cl-dashboard-title {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
}

.cl-dashboard-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	background: var(--md-secondary-container);
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 500;
	color: var(--md-on-secondary-container);
}

.cl-score-row {
	display: flex;
	gap: 16px;
	align-items: center;
	margin-bottom: 18px;
}

.cl-score-ring-wrap {
	position: relative;
	width: 90px;
	height: 90px;
	flex-shrink: 0;
}

.cl-score-ring-wrap svg {
	transform: rotate(-90deg);
}

.cl-score-ring-bg {
	fill: none;
	stroke: var(--md-surface-container-high);
	stroke-width: 7;
}

.cl-score-ring-primary {
	fill: none;
	stroke: var(--md-primary);
	stroke-width: 7;
	stroke-linecap: round;
	stroke-dasharray: 226;
	stroke-dashoffset: 45;
}

.cl-score-ring-accent {
	fill: none;
	stroke: var(--citelayer-orange);
	stroke-width: 4;
	stroke-linecap: round;
	stroke-dasharray: 226;
	stroke-dashoffset: 160;
}

.cl-score-center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.cl-score-number {
	font-family: var(--font-display);
	font-size: 24px;
	font-weight: 700;
	color: var(--md-on-surface);
	line-height: 1;
}

.cl-score-label {
	font-size: 10px;
	font-weight: 500;
	color: var(--md-on-surface-variant);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.cl-score-details {
	flex: 1;
}

.cl-score-detail-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 4px 0;
}

.cl-score-detail-label {
	font-size: 12px;
	color: var(--md-on-surface-variant);
	display: flex;
	align-items: center;
	gap: 6px;
}

.cl-score-detail-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.cl-score-detail-value {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	color: var(--md-on-surface);
}

.cl-score-bar-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 3px;
}

.cl-score-bar {
	flex: 1;
	height: 4px;
	background: var(--md-surface-container-high);
	border-radius: 2px;
	overflow: hidden;
}

.cl-score-bar-fill {
	height: 100%;
	border-radius: 2px;
}

.cl-dashboard-features {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.cl-feature-pill {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 500;
}

.cl-feature-pill.active {
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
}

.cl-feature-pill.muted {
	background: var(--md-surface-container);
	color: var(--md-on-surface-variant);
}

.cl-feature-pill.orange {
	background: var(--md-tertiary-container);
	color: var(--md-on-tertiary-container);
}

.cl-fp-dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
	opacity: .7;
}

.cl-dashboard-status {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 14px;
	background: var(--md-surface-container);
	border-radius: var(--radius-m);
	border: 1px solid var(--md-outline-variant);
}

.cl-status-check {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--md-on-surface);
}

.cl-status-check-icon {
	width: 16px;
	height: 16px;
	background: #4CAF50;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-status-time {
	font-size: 11px;
	color: var(--md-on-surface-variant);
	font-family: var(--font-mono);
}

.cl-float-card {
	position: absolute;
	background: var(--md-surface-container-lowest);
	border: 1px solid color-mix(in srgb, var(--md-outline-variant) 75%, transparent);
	border-radius: var(--radius-l);
	padding: 12px 16px;
	box-shadow: var(--md-elevation-3);
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 175px;
	animation: cl-float 4s ease-in-out infinite;
}

@keyframes cl-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}
}

.cl-float-card-1 {
	top: -50px;
	right: -33px;
	animation-delay: 0s;
}

.cl-float-card-2 {
	bottom: 20px;
	left: -36px;
	animation-delay: 2s;
}

.cl-float-icon {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-s);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-float-icon.purple {
	background: var(--md-primary-container);
}

.cl-float-icon.orange {
	background: var(--md-tertiary-container);
}

.cl-float-label {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	color: var(--md-on-surface);
	white-space: nowrap;
}

.cl-float-sub {
	font-size: 11px;
	color: var(--md-on-surface-variant);
}

@media (max-width: 960px) {
	.cl-hero-inner {
		grid-template-columns: 1fr;
		gap: var(--space-12);
		text-align: center;
	}

	.cl-hero-visual {
		order: 2;
	}

	.cl-hero-text {
		order: 1;
	}

	.cl-hero-badge {
		margin: 0 auto var(--space-6);
	}

	.cl-hero-subline {
		margin: 0 auto var(--space-10);
	}

	.cl-hero-actions {
		justify-content: center;
	}

	.cl-hero-trust {
		justify-content: center;
	}

	.cl-float-card-1 {
		top: -15px;
		right: 0;
	}

	.cl-float-card-2 {
		bottom: 10px;
		left: 0;
	}
}

@media (max-width: 480px) {
	.cl-hero-inner {
		padding: var(--space-8) 16px var(--space-12);
	}

	.cl-hero-headline {
		font-size: 2rem;
	}

	.cl-hero-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.cl-hero-actions .btn {
		justify-content: center;
	}

	.cl-float-card {
		display: none;
	}
}

/*

 * ABOUT-SEKTION.

 */
.cl-about-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
}

.cl-about-icon-wrap {
	width: 72px;
	height: 72px;
	background: var(--md-primary-container);
	border-radius: var(--radius-l);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-6);
}

.cl-about-stats {
	display: flex;
	gap: var(--space-8);
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--md-outline-variant);
}

.cl-about-stat-value {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	color: var(--md-primary);
	line-height: 1;
	margin-bottom: 4px;
}

.cl-about-stat-label {
	font-size: 13px;
	color: var(--md-on-surface-variant);
}

.cl-about-visual {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cl-about-feature-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	transition: box-shadow .2s, transform .2s;
}

.cl-about-feature-row:hover {
	box-shadow: var(--md-elevation-2);
	transform: translateY(-1px);
}

.cl-about-feature-icon-bg {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-m);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-about-feature-icon-bg.purple {
	background: var(--md-primary-container);
}

.cl-about-feature-icon-bg.orange {
	background: var(--md-tertiary-container);
}

.cl-about-feature-icon-bg.secondary {
	background: var(--md-secondary-container);
}

.cl-about-feature-title {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
	margin-bottom: 3px;
}

.cl-about-feature-desc {
	font-size: 13px;
	color: var(--md-on-surface-variant);
	line-height: 1.5;
}

@media (max-width: 768px) {
	.cl-about-inner {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}

	.cl-about-stats {
		gap: var(--space-6);
	}
}

/*

 * HOW IT WORKS.

 */
.cl-steps-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-6);
	margin-top: var(--space-12);
	position: relative;
}

.cl-steps-grid::before {
	content: '';
	position: absolute;
	top: 36px;
	left: calc(33.33% + 12px);
	right: calc(33.33% + 12px);
	height: 2px;
	background: linear-gradient(90deg, var(--md-primary) 0%, var(--citelayer-orange) 100%);
	z-index: 0;
	pointer-events: none;
}

.cl-step-card {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-xl);
	padding: var(--space-6);
	position: relative;
	overflow: hidden;
	z-index: 1;
	transition: box-shadow .25s, transform .25s;
}

.cl-step-card:hover {
	box-shadow: var(--md-elevation-3);
	transform: translateY(-2px);
}

.cl-step-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
}

.cl-step-card:nth-child(1)::before {
	background: linear-gradient(90deg, var(--md-primary), #9A80D9);
}

.cl-step-card:nth-child(2)::before {
	background: linear-gradient(90deg, #9A80D9, var(--citelayer-orange));
}

.cl-step-card:nth-child(3)::before {
	background: linear-gradient(90deg, var(--citelayer-orange), var(--citelayer-orange-bright));
}

.cl-step-icon-wrap {
	width: 56px;
	height: 56px;
	background: var(--md-primary-container);
	border-radius: var(--radius-l);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-4);
}

.cl-step-number {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 500;
	color: var(--md-primary);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: var(--space-2);
}

.cl-step-title {
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-2);
}

.cl-step-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--md-on-surface-variant);
}

@media (max-width: 767px) {
	.cl-steps-grid {
		grid-template-columns: 1fr;
	}

	.cl-steps-grid::before {
		display: none;
	}
}

/*

 * FEATURES-SEKTION.

 */
.cl-features-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-12);
}

.cl-feature-card {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-6);
	position: relative;
	overflow: hidden;
	transition: box-shadow .25s, transform .25s, border-color .25s;
}

.cl-feature-card:hover {
	box-shadow: var(--md-elevation-2);
	transform: translateY(-2px);
	border-color: color-mix(in srgb, var(--md-primary) 30%, transparent);
}

.cl-feature-card::after {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--md-primary) 7%, transparent) 0%, transparent 70%);
	pointer-events: none;
}

.cl-feature-card-icon {
	width: 52px;
	height: 52px;
	background: var(--md-primary-container);
	border-radius: var(--radius-m);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-4);
}

.cl-feature-card-icon.orange {
	background: var(--md-tertiary-container);
}

.cl-feature-card-icon.secondary {
	background: var(--md-secondary-container);
}

.cl-feature-card-title {
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-2);
}

.cl-feature-card-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--md-on-surface-variant);
}

.cl-feature-card-tag {
	display: inline-flex;
	align-items: center;
	margin-top: var(--space-3);
	padding: 3px 10px;
	background: var(--md-secondary-container);
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 500;
	color: var(--md-on-secondary-container);
	letter-spacing: .04em;
}

.cl-feature-card-tag.orange {
	background: var(--md-tertiary-container);
	color: var(--md-on-tertiary-container);
}

@media (max-width: 960px) {
	.cl-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.cl-features-grid {
		grid-template-columns: 1fr;
	}
}

/*

 * METHOD-SEKTION.

 */
.cl-method-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-16);
	align-items: center;
}

.cl-method-prism-diagram {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	position: relative;
	overflow: hidden;
}

.cl-method-prism-diagram::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--md-primary) 6%, transparent) 0%, transparent 50%),
		radial-gradient(circle at 20% 80%, color-mix(in srgb, var(--citelayer-orange) 4%, transparent) 0%, transparent 50%);
	pointer-events: none;
}

.cl-method-layer {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-l);
	margin-bottom: var(--space-3);
	position: relative;
}

.cl-method-layer:last-child {
	margin-bottom: 0;
}

.cl-method-layer.l1 {
	background: color-mix(in srgb, var(--md-primary) 12%, transparent);
}

.cl-method-layer.l2 {
	background: color-mix(in srgb, #9A80D9 10%, transparent);
}

.cl-method-layer.l3 {
	background: color-mix(in srgb, var(--md-secondary) 8%, transparent);
}

.cl-method-layer-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-m);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cl-method-layer.l1 .cl-method-layer-icon {
	background: var(--md-primary-container);
}

.cl-method-layer.l2 .cl-method-layer-icon {
	background: var(--md-secondary-container);
}

.cl-method-layer.l3 .cl-method-layer-icon {
	background: var(--md-surface-container-highest);
}

.cl-method-layer-name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: 2px;
}

.cl-method-layer-desc {
	font-size: 12px;
	color: var(--md-on-surface-variant);
}

.cl-method-beam {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 32px;
	width: 3px;
	background: linear-gradient(180deg, var(--citelayer-orange-bright) 0%, var(--citelayer-orange) 60%, transparent 100%);
	border-radius: 3px;
	opacity: .7;
}

.cl-method-text-points {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	margin-top: var(--space-8);
}

.cl-method-point {
	display: flex;
	gap: var(--space-4);
}

.cl-method-point-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--md-primary-container);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	color: var(--md-on-primary-container);
}

.cl-method-point-title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: 4px;
}

.cl-method-point-body {
	font-size: 14px;
	line-height: 1.6;
	color: var(--md-on-surface-variant);
}

@media (max-width: 768px) {
	.cl-method-inner {
		grid-template-columns: 1fr;
		gap: var(--space-10);
	}
}

/*

 * TESTIMONIALS.

 */
.cl-testimonials-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-5);
	margin-top: var(--space-12);
}

.cl-testimonial-card {
	background: var(--md-surface-container);
	border: 1px solid var(--md-outline-variant);
	border-radius: var(--radius-l);
	padding: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	transition: box-shadow .25s, transform .25s;
}

.cl-testimonial-card:hover {
	box-shadow: var(--md-elevation-2);
	transform: translateY(-2px);
}

.cl-testimonial-stars {
	display: flex;
	gap: 3px;
	color: var(--citelayer-orange);
}

.cl-testimonial-quote {
	font-size: 14px;
	line-height: 1.65;
	color: var(--md-on-surface);
	font-style: italic;
	flex: 1;
}

.cl-testimonial-quote::before {
	content: '\201C';
}

.cl-testimonial-quote::after {
	content: '\201D';
}

.cl-testimonial-author {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding-top: var(--space-3);
	border-top: 1px solid var(--md-outline-variant);
}

.cl-testimonial-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--md-primary-container);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--md-on-primary-container);
	flex-shrink: 0;
}

.cl-testimonial-name {
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 500;
	color: var(--md-on-surface);
}

.cl-testimonial-role {
	font-size: 12px;
	color: var(--md-on-surface-variant);
}

@media (max-width: 960px) {
	.cl-testimonials-grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 600px) {
	.cl-testimonials-grid {
		grid-template-columns: 1fr;
	}
}

/*

 * PRICING.

 */
.cl-pricing-grid {
	display: flex;
	gap: var(--space-5);
	max-width: 100%;
	margin: var(--space-12) auto 0;
	align-items: start;
	justify-content: center;
}

.cl-pricing-card {
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	border: 1.5px solid var(--md-outline-variant);
	background: var(--md-surface-container);
	position: relative;
	transition: box-shadow .25s, transform .25s;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;
}

.cl-pricing-card:hover {
	box-shadow: var(--md-elevation-2);
}

.cl-pricing-card-premium {
	background: var(--md-primary-container);
	border-color: color-mix(in srgb, var(--md-primary) 30%, transparent);
	transform: scale(1.02);
}

.cl-pricing-card-premium:hover {
	transform: scale(1.02) translateY(-2px);
}

.cl-pricing-popular-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--md-primary);
	color: var(--md-on-primary);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 500;
	padding: 4px 16px;
	border-radius: var(--radius-full);
	white-space: nowrap;
}

.cl-pricing-tier-label {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-2);
}

.cl-pricing-card-premium .cl-pricing-tier-label {
	color: var(--md-on-primary-container);
}

.cl-pricing-price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: var(--space-2);
}

.cl-pricing-price-amount {
	font-family: var(--font-display);
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--md-on-surface);
}

.cl-pricing-card-premium .cl-pricing-price-amount {
	color: var(--md-on-primary-container);
}

.cl-pricing-price-period {
	font-size: 14px;
	color: var(--md-on-surface-variant);
}

.cl-pricing-card-premium .cl-pricing-price-period {
	color: var(--md-on-primary-container);
	opacity: .7;
}

.cl-pricing-price-note {
	font-size: 12px;
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-6);
}

.cl-pricing-card-premium .cl-pricing-price-note {
	color: var(--md-on-primary-container);
	opacity: .7;
}

.cl-pricing-divider {
	height: 1px;
	background: var(--md-outline-variant);
	margin-bottom: var(--space-5);
}

.cl-pricing-card-premium .cl-pricing-divider {
	background: color-mix(in srgb, var(--md-on-primary-container) 20%, transparent);
}

.cl-pricing-features {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-bottom: var(--space-8);
}

.cl-pricing-feature {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: 14px;
	color: var(--md-on-surface);
}

.cl-pricing-card-premium .cl-pricing-feature {
	color: var(--md-on-primary-container);
}

.cl-feature-icon-check {
	color: #4CAF50;
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 1px;
}

.cl-pricing-card-premium .cl-feature-icon-check {
	color: #81C784;
}

.cl-feature-icon-cross {
	color: var(--md-outline);
	font-size: 18px;
	flex-shrink: 0;
	margin-top: 1px;
}

.cl-pricing-feature-muted {
	color: var(--md-on-surface-variant);
}

.cl-pricing-cta {
	width: 100%;
	justify-content: center;
	height: 48px;
	font-size: 15px;
	margin-top: auto;
}

.cl-pricing-card-premium .cl-pricing-cta {
	background: var(--md-on-primary-container);
	color: var(--md-primary-container);
}

.cl-pricing-cta-note {
	text-align: center;
	font-size: 12px;
	color: var(--md-on-surface-variant);
	margin-top: var(--space-3);
}

.cl-pricing-card-premium .cl-pricing-cta-note {
	color: var(--md-on-primary-container);
	opacity: .55;
}

@media (max-width: 640px) {
	.cl-pricing-card-premium {
		transform: none;
	}

	.cl-pricing-card-premium:hover {
		transform: translateY(-2px);
	}
}

/*

 * FAQ-AKKORDEON.

 */
.cl-faq-list {
	max-width: 720px;
	margin: var(--space-12) auto 0;
}

.cl-faq-item {
	border-bottom: 1px solid var(--md-outline-variant);
}

.cl-faq-item:first-child {
	border-top: 1px solid var(--md-outline-variant);
}

.cl-faq-question {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) 0;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 500;
	color: var(--md-on-surface);
	text-align: left;
	transition: color .2s;
}

.cl-faq-question:hover {
	color: var(--md-primary);
}

.cl-faq-question[aria-expanded="true"] {
	color: var(--md-primary);
}

.cl-faq-question:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

.cl-faq-chevron {
	width: 20px;
	height: 20px;
	color: var(--md-on-surface-variant);
	flex-shrink: 0;
	transition: transform .3s cubic-bezier(0.2, 0, 0, 1);
}

.cl-faq-question[aria-expanded="true"] .cl-faq-chevron {
	transform: rotate(180deg);
	color: var(--md-primary);
}

.cl-faq-answer {
	overflow: hidden;
	max-height: 0;
	transition: max-height .35s cubic-bezier(0.2, 0, 0, 1), padding .35s;
}

.cl-faq-answer.open {
	max-height: 600px;
}

.cl-faq-answer-inner {
	padding-bottom: var(--space-5);
	font-size: 15px;
	line-height: 1.7;
	color: var(--md-on-surface-variant);
}

.cl-faq-answer-inner a {
	color: var(--md-primary);
}

.cl-faq-answer-inner strong {
	color: var(--md-on-surface);
}

/*

 * FOOTER.

 */
.cl-footer {
	background: var(--md-surface-container);
	border-top: 1px solid var(--md-outline-variant);
	padding: var(--space-12) 0 var(--space-8);
}

.cl-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.cl-footer-top {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: var(--space-10);
	padding-bottom: var(--space-8);
	border-bottom: 1px solid var(--md-outline-variant);
	margin-bottom: var(--space-6);
}

.cl-footer-brand-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--md-on-surface-variant);
	margin-top: var(--space-3);
	max-width: 260px;
}

.cl-footer-social {
	display: flex;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.cl-footer-social-link {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-s);
	border: 1px solid var(--md-outline-variant);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--md-on-surface-variant);
	text-decoration: none;
	transition: all .2s;
	min-width: 44px;
	min-height: 44px;
}

.cl-footer-social-link:hover {
	background: color-mix(in srgb, var(--md-primary) 8%, transparent);
	border-color: var(--md-primary);
	color: var(--md-primary);
}

.cl-footer-social-link:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
}

.cl-footer-col-title {
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 700;
	color: var(--md-on-surface);
	margin-bottom: var(--space-4);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.cl-footer-col-links {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	align-items: flex-start;
}

.cl-footer-col-links a {
	font-size: 14px;
	color: var(--md-on-surface-variant);
	text-decoration: none;
	transition: color .2s;
}

.cl-footer-col-links a:hover {
	color: var(--md-primary);
}

.cl-footer-col-links a:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

.cl-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.cl-footer-copyright {
	font-size: 13px;
	color: var(--md-on-surface-variant);
}

.cl-footer-legal {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.cl-footer-legal a {
	font-size: 13px;
	color: var(--md-on-surface-variant);
	text-decoration: none;
	transition: color .2s;
}

.cl-footer-legal a:hover {
	color: var(--md-primary);
}

.cl-footer-legal a:focus-visible {
	outline: 3px solid var(--md-primary);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

/*

 * WordPress Block Overrides inside Footer.

 */
.cl-footer .wp-block-columns {
	gap: var(--space-8);
}

.cl-footer .cl-footer-col-links.wp-block-navigation,
.cl-footer .cl-footer-legal.wp-block-navigation {
	gap: 0;
}

.cl-footer .cl-footer-col-links .wp-block-navigation__container {
	gap: var(--space-3);
	flex-direction: column;
}

.cl-footer .cl-footer-col-links .wp-block-navigation-item__content {
	font-size: 14px;
	color: var(--md-on-surface-variant);
	text-decoration: none;
	padding: 0;
	transition: color .2s;
}

.cl-footer .cl-footer-col-links .wp-block-navigation-item__content:hover {
	color: var(--md-primary);
}

.cl-footer .cl-footer-legal .wp-block-navigation__container {
	gap: var(--space-4);
}

.cl-footer .cl-footer-legal .wp-block-navigation-item__content {
	font-size: 13px;
	color: var(--md-on-surface-variant);
	text-decoration: none;
	padding: 0;
	transition: color .2s;
}

.cl-footer .cl-footer-legal .wp-block-navigation-item__content:hover {
	color: var(--md-primary);
}

/*

 * Social Links Block in Footer.

 */
.cl-footer .wp-block-social-links {
	gap: var(--space-2);
	margin-top: var(--space-4);
	padding: 0;
}

.cl-footer .wp-block-social-links .wp-block-social-link.wp-social-link,
.cl-footer .wp-block-social-link {
	width: 36px;
	height: 36px;
	border-radius: var(--radius-s);
	border: 1px solid var(--md-outline-variant);
	text-align: center;
	justify-content: center;
	align-items: center;
	display: inline-flex;
}

.cl-footer .wp-block-social-link:hover {
	background: color-mix(in srgb, var(--md-primary) 8%, transparent);
	border-color: var(--md-primary);
}

@media (max-width: 900px) {
	.cl-footer-top {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}
}

@media (max-width: 540px) {
	.cl-footer-top {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.cl-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
}

/*

 * SCROLL-REVEAL-ANIMATION.

 */
.reveal {
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity .55s cubic-bezier(0.05, 0.7, 0.1, 1),
		transform .55s cubic-bezier(0.05, 0.7, 0.1, 1);
}

.reveal.visible {
	opacity: 1;
	transform: none;
}

.reveal-delay-1 {
	transition-delay: .1s;
}

.reveal-delay-2 {
	transition-delay: .2s;
}

.reveal-delay-3 {
	transition-delay: .3s;
}

/*

 * DARK MODE OVERRIDES (aus dark-mode.css).

 */
[data-theme="dark"] .cl-dashboard-card {
	background: color-mix(in srgb, var(--md-surface-container) 95%, transparent);
}

[data-theme="dark"] .cl-float-card {
	background: var(--md-surface-container-low);
}

[data-theme="dark"] .cl-hero-headline-accent {
	background: linear-gradient(135deg, var(--md-primary) 0%, var(--citelayer-prism-layer2) 50%, var(--citelayer-orange) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

[data-theme="dark"] .cl-nav {
	backdrop-filter: blur(24px) saturate(150%);
	-webkit-backdrop-filter: blur(24px) saturate(150%);
}

[data-theme="dark"] .cl-method-prism-diagram {
	background: var(--md-surface-container-low);
}

[data-theme="dark"] .cl-feature-card:hover {
	border-color: color-mix(in srgb, var(--md-primary) 40%, transparent);
}

[data-theme="dark"] .cl-pricing-card-premium {
	background: var(--md-primary-container);
	border-color: color-mix(in srgb, var(--md-primary) 40%, transparent);
}

[data-theme="dark"] :focus-visible {
	outline-color: var(--md-primary);
}

[data-theme="dark"] .reveal {
	transition:
		opacity .55s cubic-bezier(0.05, 0.7, 0.1, 1),
		transform .55s cubic-bezier(0.05, 0.7, 0.1, 1);
}

[data-theme="dark"] .cl-404 {
	background: var(--gradient-hero);
}

[data-theme="dark"] .cl-footer {
	background: var(--md-surface-container-low);
}

/* ==========================================================================
/* ==========================================================================
	PREMIUM LANDING PAGE STYLES
	========================================================================== */

/*

 * Premium Hero.

 */
.premium-hero {
	padding-top: 64px;
	padding-bottom: var(--space-20);
	background: var(--md-background);
	position: relative;
	overflow: hidden;
}

/*

 * Subtle gradient decoration.

 */
.premium-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(ellipse 60% 50% at 10% 30%, color-mix(in srgb, var(--md-primary-container) 50%, transparent) 0%, transparent 65%),
		radial-gradient(ellipse 50% 40% at 90% 70%, color-mix(in srgb, var(--md-tertiary-container) 40%, transparent) 0%, transparent 60%);
	pointer-events: none;
}

.premium-hero-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-16) 24px 0;
	text-align: center;
	position: relative;
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	height: 32px;
	padding: 0 14px;
	border-radius: var(--radius-full);
	background: var(--md-tertiary-container);
	color: var(--md-on-tertiary-container);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: var(--space-6);
}

.premium-hero-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw + 1rem, 3.5625rem);
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--md-on-surface);
	margin-bottom: var(--space-5);
}

.premium-hero-title em {
	font-style: normal;
	color: var(--md-primary);
}

.premium-hero-body {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--md-on-surface-variant);
	max-width: 600px;
	margin: 0 auto var(--space-8);
}

.hero-cta-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3);
	flex-wrap: wrap;
}

/*

 * Prism decoration for hero.

 */
.hero-prism-mini {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: var(--space-10) auto 0;
}

/*

 * Product Cards Section.

 */
.products-section {
	padding: var(--space-20) 0;
	background: var(--section-alt-bg);
	border-top: 1px solid var(--md-outline-variant);
}

.section-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.section-header-centered {
	text-align: center;
	margin-bottom: var(--space-12);
}

/*

 * Two-column product cards.

 */
.product-cards-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
}

.product-card {
	background: var(--md-surface-container-lowest);
	border-radius: var(--radius-xl);
	padding: var(--space-8);
	box-shadow: var(--md-elevation-2);
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	position: relative;
	overflow: hidden;
	transition: transform .25s, box-shadow .25s;
}

.product-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--md-elevation-3);
}

/*

 * Subtle accent decoration.

 */
.product-card::before {
	content: '';
	position: absolute;
	top: -40px;
	right: -40px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	pointer-events: none;
	opacity: .5;
}

.product-card.woo::before {
	background: radial-gradient(circle, color-mix(in srgb, var(--md-secondary-container) 80%, transparent), transparent 70%);
}

.product-card.edd::before {
	background: radial-gradient(circle, color-mix(in srgb, var(--md-primary-container) 80%, transparent), transparent 70%);
}

.product-card-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-4);
}

.product-card-icon {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-l);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.product-card.woo .product-card-icon {
	background: var(--md-secondary-container);
}

.product-card.edd .product-card-icon {
	background: var(--md-primary-container);
}

.product-card-badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 10px;
	border-radius: var(--radius-full);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	white-space: nowrap;
}

.product-card.woo .product-card-badge {
	background: var(--md-secondary-container);
	color: var(--md-on-secondary-container);
}

.product-card.edd .product-card-badge {
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
}

.product-card-name {
	font-family: var(--font-display);
	font-size: 1.375rem;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1.25;
	color: var(--md-on-surface);
}

.product-card-desc {
	font-size: .9375rem;
	line-height: 1.65;
	color: var(--md-on-surface-variant);
}

/*

 * Feature list.

 */
.product-card-features {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	flex: 1;
}

.product-feature-row {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
}

.product-feature-icon {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 1px;
}

.product-card.woo .product-feature-icon {
	background: var(--md-secondary-container);
}

.product-card.edd .product-feature-icon {
	background: var(--md-primary-container);
}

.product-feature-icon .material-symbols-outlined {
	font-size: 13px;
	font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}

.product-card.woo .product-feature-icon .material-symbols-outlined {
	color: var(--md-secondary);
}

.product-card.edd .product-feature-icon .material-symbols-outlined {
	color: var(--md-primary);
}

.product-feature-text {
	font-size: .875rem;
	line-height: 1.5;
	color: var(--md-on-surface);
}

/*

 * Price + CTA.

 */
.product-card-footer {
	padding-top: var(--space-5);
	border-top: 1px solid var(--md-outline-variant);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.product-card-price-area {}

.product-card-price-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--md-on-surface-variant);
	margin-bottom: 2px;
}

.product-card-price {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: 700;
	letter-spacing: -.03em;
	color: var(--md-on-surface);
}

.product-card-price span {
	font-size: 14px;
	font-weight: 400;
	color: var(--md-on-surface-variant);
}

.product-card-ctas {
	display: flex;
	gap: var(--space-2);
	flex-wrap: wrap;
}

/*

 * Comparison Table.

 */
.comparison-section {
	padding: var(--space-20) 0;
	background: var(--md-background);
}

.comparison-table-wrap {
	overflow-x: auto;
	margin-top: var(--space-8);
}

.comparison-table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
	border-radius: var(--radius-l);
	overflow: hidden;
}

.comparison-table thead th {
	padding: var(--space-5) var(--space-6);
	text-align: left;
	background: var(--md-surface-container);
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: 700;
	color: var(--md-on-surface);
	border-bottom: 2px solid var(--md-outline-variant);
	white-space: nowrap;
}

.comparison-table thead th:first-child {
	font-size: 12px;
	font-weight: 500;
	color: var(--md-on-surface-variant);
	text-transform: uppercase;
	letter-spacing: .05em;
}

.comparison-table thead th.col-woo {
	background: var(--md-secondary-container);
	color: var(--md-on-secondary-container);
}

.comparison-table thead th.col-edd {
	background: var(--md-primary-container);
	color: var(--md-on-primary-container);
}

.plan-chip {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	margin-bottom: 2px;
}

.plan-chip-sub {
	display: block;
	font-size: 11px;
	font-weight: 500;
	opacity: .75;
}

.comparison-table tbody tr {
	border-bottom: 1px solid var(--md-outline-variant);
}

.comparison-table tbody tr:last-child {
	border-bottom: none;
}

.comparison-table tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--md-surface-container) 30%, transparent);
}

.comparison-table tbody td {
	padding: 11px var(--space-6);
	font-size: .875rem;
	color: var(--md-on-surface);
	vertical-align: middle;
}

.comparison-table tbody td:first-child {
	font-weight: 500;
}

.comparison-table tbody td.col-woo {
	background: color-mix(in srgb, var(--md-secondary-container) 20%, transparent);
}

.comparison-table tbody td.col-edd {
	background: color-mix(in srgb, var(--md-primary-container) 20%, transparent);
}

.comparison-table tbody tr:nth-child(even) td.col-woo {
	background: color-mix(in srgb, var(--md-secondary-container) 30%, transparent);
}

.comparison-table tbody tr:nth-child(even) td.col-edd {
	background: color-mix(in srgb, var(--md-primary-container) 30%, transparent);
}

.check-y {
	color: var(--md-primary);
	font-size: 20px;
	font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 20;
}

.check-n {
	color: var(--md-outline);
	font-size: 18px;
}

.comparison-table tfoot td {
	padding: var(--space-4) var(--space-6);
	background: var(--md-surface-container);
	border-top: 2px solid var(--md-outline-variant);
}

.comparison-table tfoot td.col-woo {
	background: var(--md-secondary-container);
}

.comparison-table tfoot td.col-edd {
	background: var(--md-primary-container);
}

.comparison-section-category {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--md-on-surface-variant);
	padding-top: var(--space-5) !important;
	padding-bottom: var(--space-2) !important;
	background: none !important;
}

.comparison-table tbody tr.section-row {
	background: none;
}

.comparison-table tbody tr.section-row td {
	border-bottom: none;
}

/*

 * Trust Signals.

 */
.trust-section {
	padding: var(--space-16) 0;
	background: var(--md-primary-container);
	border-top: 1px solid color-mix(in srgb, var(--md-on-primary-container) 12%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--md-on-primary-container) 12%, transparent);
}

.trust-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.trust-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-6);
}

.trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--space-3);
}

.trust-icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: var(--radius-full);
	background: color-mix(in srgb, var(--md-on-primary-container) 10%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.trust-icon-wrap .material-symbols-outlined {
	font-size: 28px;
	color: var(--md-on-primary-container);
}

.trust-item-title {
	font-family: var(--font-display);
	font-size: 15px;
	font-weight: 700;
	color: var(--md-on-primary-container);
}

.trust-item-desc {
	font-size: 13px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--md-on-primary-container) 75%, transparent);
}

/*

 * FAQ Section (Premium extended).

 */
.faq-section {
	padding: var(--space-20) 0;
	background: var(--section-alt-bg);
}

.faq-grid {
	max-width: 800px;
	margin: var(--space-10) auto 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.faq-item {
	background: var(--md-surface-container-lowest);
	border-radius: var(--radius-l);
	border: 1.5px solid var(--md-outline-variant);
	overflow: hidden;
	transition: border-color .2s;
}

.faq-item:focus-within {
	border-color: var(--md-primary);
}

.faq-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-5) var(--space-6);
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
}

.faq-question {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 600;
	color: var(--md-on-surface);
	line-height: 1.4;
}

.faq-icon {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-full);
	background: var(--md-surface-container-high);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background .2s, transform .25s;
}

.faq-icon .material-symbols-outlined {
	font-size: 18px;
	color: var(--md-primary);
}

.faq-item.open .faq-icon {
	background: var(--md-primary-container);
	transform: rotate(180deg);
}

.faq-answer {
	display: none;
	padding: 0 var(--space-6) var(--space-5);
}

.faq-item.open .faq-answer {
	display: block;
}

.faq-answer p {
	font-size: .9375rem;
	line-height: 1.7;
	color: var(--md-on-surface-variant);
}

.faq-answer p+p {
	margin-top: var(--space-3);
}

.faq-answer a {
	color: var(--md-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.section-subline {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--md-on-surface-variant);
	max-width: 520px;
	margin: 0 auto;
}

/* ==========================================================================
	WORDPRESS BLOCK OVERRIDES
	========================================================================== */

.wp-site-blocks {
	padding-top: 0 !important;
}

.wp-block-group {
	margin-top: 0;
	margin-bottom: 0;
}

body {
	margin: 0;
}

/*

 * Admin Bar Offset.

 */
body.admin-bar .nav,
body.admin-bar .cl-nav {
	top: var(--wp-admin--admin-bar--height, 32px);
}

body.admin-bar .hero,
body.admin-bar .cl-hero {
	padding-top: calc(64px + var(--wp-admin--admin-bar--height, 32px));
}

@media screen and (max-width: 782px) {

	body.admin-bar .nav,
	body.admin-bar .cl-nav {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

.entry-content>*,
.wp-block-post-content>* {
	margin-top: 0;
	margin-bottom: 0;
}

/*

 * Addon Logo Container.

 */
.cl-pricing-addon-logo {
	width: 112px;
	height: 58px;
	margin: 0 auto var(--space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--md-surface);
	border-radius: var(--radius-l);
	border: 1px solid var(--md-outline-variant);
}

.cl-pricing-card-premium .cl-pricing-addon-logo {
	background: color-mix(in srgb, var(--md-primary-container) 60%, var(--md-surface));
	border-color: color-mix(in srgb, var(--md-primary) 20%, transparent);
}

.cl-pricing-addon-logo svg {
	display: block;
}

/*

 * Addon Tagline.

 */
.cl-pricing-addon-tagline {
	font-size: 14px;
	line-height: 1.5;
	color: var(--md-on-surface-variant);
	text-align: center;
	margin-bottom: var(--space-3);
}

.cl-pricing-card-premium .cl-pricing-addon-tagline {
	color: var(--md-on-primary-container);
	opacity: .8;
}

/*

 * Flex-Kinder gleich breit.

 */
.cl-pricing-grid .cl-pricing-card-addon {
	flex: 1 1 0;
}

.cl-pricing-grid .cl-pricing-card-free {
	flex: 0.85 1 0;
}

/*

 * Responsive: Tablet — Free oben, Addons nebeneinander.

 */
@media (max-width: 1024px) {
	.cl-pricing-grid {
		flex-wrap: wrap;
	}

	.cl-pricing-grid .cl-pricing-card-free {
		flex: 1 1 100%;
	}

	.cl-pricing-grid .cl-pricing-card-addon {
		flex: 1 1 calc(50% - var(--space-3));
	}
}

/*

 * Mobile: alles gestackt.

 */
@media (max-width: 768px) {
	.cl-pricing-grid .cl-pricing-card-addon {
		flex: 1 1 100%;
	}

	.cl-pricing-addon-logo {
		width: 56px;
		height: 56px;
	}
}

/*

 * Dark Mode.

 */
[data-theme="dark"] .cl-pricing-addon-logo {
	background: var(--md-surface-container-high);
	border-color: var(--md-outline-variant);
}

[data-theme="dark"] .cl-pricing-card-premium .cl-pricing-addon-logo,
[data-theme="dark"] .cl-pricing-card-addon .cl-pricing-addon-logo-edd,
[data-theme="dark"] .cl-pricing-card-free .cl-pricing-addon-logo {
	background: var(--md-on-primary-container);
}

/* ══════════════════════════════════════════════════════════════════
	PREMIUM PAGE — BOTTOM CTA
	══════════════════════════════════════════════════════════════════ */
.bottom-cta {
	padding: var(--space-20) 0;
	background: var(--md-background);
	text-align: center;
}

.bottom-cta-inner {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 24px;
}

.bottom-cta-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.5vw + .25rem, 2.25rem);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.2;
	color: var(--md-on-surface);
	margin-bottom: var(--space-4);
}

.bottom-cta-body {
	font-size: 1rem;
	line-height: 1.65;
	color: var(--md-on-surface-variant);
	margin-bottom: var(--space-8);
}

/* ══════════════════════════════════════════════════════════════════
	PREMIUM PAGE — RESPONSIVE BREAKPOINTS
	══════════════════════════════════════════════════════════════════ */
@media(max-width:1024px) {
	.trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media(max-width:768px) {
	.product-cards-grid {
		grid-template-columns: 1fr;
	}

	.trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media(max-width:540px) {
	.trust-grid {
		grid-template-columns: 1fr;
	}

	.product-card-footer {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-cta-group {
		flex-direction: column;
		align-items: stretch;
	}

	.hero-cta-group .btn {
		text-align: center;
		justify-content: center;
	}
}

/*

 * Content Separator — visueller Trenner im Post-Card Body.

 */
.pcontentseperator {
	background: var(--md-surface-container-low);
	border-radius: var(--radius-l);
	overflow: hidden;
	box-shadow: var(--md-elevation-1);
}

/*

 * Sidebar Popular Posts — Thumbnail object-fit.

 */
.sidebar-widget .popular-post-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
	EDD CART PREVIEW — Floating Button Styling
	The trigger button lives inside a Shadow DOM Web Component.
	Host-element animation is applied here (outside Shadow DOM).
	Internal button styles are injected via JS (theme.js).
	========================================================================== */

/* Floating animation on the host element (not in Shadow DOM) */
edd-cart-preview {
	animation: cl-edd-fab-float 4s ease-in-out infinite;
}

@keyframes cl-edd-fab-float {

	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-4px);
	}
}

@media screen and (max-width: 767px) {
	@keyframes cl-edd-fab-float {

		0%,
		100% {
			transform: translateY(0);
		}

		50% {
			transform: translateY(-3px);
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	edd-cart-preview {
		animation: none;
	}
}