/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "area": "asset",
  "file": "assets/css/yop-vs-functions-landing.css",
  "file_role": "website_landingpage_css",
  "feature": "functions_landingpage",
  "development_status": "done",
  "last_updated": "2026-06-17",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_gutenberg": true,
  "supports_elementor": true,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false
}
YOPT_DEV_STAMP_END
*/

:root {
	--yop-vs-orange: #ff5a00;
	--yop-vs-orange-dark: #e84f00;
	--yop-vs-orange-soft: #fff1e8;
	--yop-vs-orange-ultra-soft: #fff8f3;
	--yop-vs-black: #101010;
	--yop-vs-dark: #181818;
	--yop-vs-text: #343434;
	--yop-vs-muted: #6d6d6d;
	--yop-vs-white: #ffffff;
	--yop-vs-bg: #fbfbfb;
	--yop-vs-border: #e9e9e9;
	--yop-vs-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.06);
	--yop-vs-shadow-card: 0 10px 26px rgba(16, 16, 16, 0.07);
	--yop-vs-shadow-hero: 0 34px 90px rgba(16, 16, 16, 0.15);
	--yop-vs-shadow-orange: 0 12px 26px rgba(255, 90, 0, 0.22);
	--yop-vs-font-main: Inter, Manrope, "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body.page-template-page-yop-vs-functions-php {
	background: var(--yop-vs-bg);
}

.yop-vs-functions-page,
.yop-vs-functions-page * {
	box-sizing: border-box;
}

.yop-vs-functions-page {
	margin: 0;
	padding: 0;
	background:
		radial-gradient(circle at 78% 11%, rgba(255, 90, 0, 0.13), transparent 25%),
		linear-gradient(180deg, #ffffff 0%, #fbfbfb 54%, #ffffff 100%);
	color: var(--yop-vs-text);
	font-family: var(--yop-vs-font-main);
	overflow: hidden;
}

.yop-vs-functions-shell {
	width: min(100% - 40px, 1440px);
	margin: 0 auto;
}

.yop-vs-eyebrow {
	margin: 0 0 18px;
	color: var(--yop-vs-orange);
	font-size: 12px;
	font-weight: 900;
	letter-spacing: 0.08em;
	line-height: 1.3;
	text-transform: uppercase;
}

.yop-vs-functions-hero {
	padding: 88px 0 72px;
	border-bottom: 1px solid rgba(233, 233, 233, 0.9);
}

.yop-vs-functions-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(520px, 1.15fr);
	gap: 56px;
	align-items: center;
}

.yop-vs-functions-hero-copy h1 {
	max-width: 690px;
	margin: 0;
	color: var(--yop-vs-black);
	font-size: clamp(42px, 5.2vw, 76px);
	font-weight: 950;
	line-height: 0.98;
	letter-spacing: -0.06em;
}

.yop-vs-functions-hero-copy h1 span {
	color: var(--yop-vs-orange);
}

.yop-vs-functions-hero-text {
	max-width: 620px;
	margin: 28px 0 0;
	color: var(--yop-vs-muted);
	font-size: 17px;
	font-weight: 450;
	line-height: 1.75;
}

.yop-vs-functions-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 32px;
}

.yop-vs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 24px;
	border-radius: 14px;
	font-size: 13px;
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.yop-vs-btn:hover {
	transform: translateY(-2px);
	text-decoration: none;
}

.yop-vs-btn-primary {
	background: var(--yop-vs-orange);
	color: var(--yop-vs-white);
	box-shadow: var(--yop-vs-shadow-orange);
}

.yop-vs-btn-primary:hover {
	background: var(--yop-vs-orange-dark);
	color: var(--yop-vs-white);
}

.yop-vs-btn-secondary {
	background: var(--yop-vs-white);
	color: var(--yop-vs-black);
	border: 1px solid var(--yop-vs-border);
	box-shadow: 0 8px 22px rgba(16, 16, 16, 0.04);
}

.yop-vs-btn-secondary:hover {
	background: var(--yop-vs-black);
	border-color: var(--yop-vs-black);
	color: var(--yop-vs-white);
}

.yop-vs-btn-dark-secondary {
	background: transparent;
	color: var(--yop-vs-white);
	border: 1px solid rgba(255, 255, 255, 0.28);
}

.yop-vs-btn-dark-secondary:hover {
	background: var(--yop-vs-white);
	color: var(--yop-vs-black);
	border-color: var(--yop-vs-white);
}

.yop-vs-functions-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 30px;
}

.yop-vs-functions-trust span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--yop-vs-black);
	font-size: 13px;
	font-weight: 800;
}

.yop-vs-functions-trust strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--yop-vs-orange-soft);
	color: var(--yop-vs-orange);
	font-size: 12px;
}

.yop-vs-functions-mockup-wrap {
	position: relative;
	min-height: 468px;
}

.yop-vs-functions-glow {
	position: absolute;
	inset: 8% auto auto -4%;
	width: 260px;
	height: 260px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(255, 90, 0, 0.22), rgba(255, 90, 0, 0.04) 55%, transparent 70%);
	pointer-events: none;
}

.yop-vs-functions-dashboard {
	position: relative;
	display: grid;
	grid-template-columns: 165px minmax(0, 1fr);
	width: min(100%, 720px);
	min-height: 430px;
	margin-left: auto;
	overflow: hidden;
	border: 1px solid rgba(233, 233, 233, 0.95);
	border-radius: 28px;
	background: var(--yop-vs-white);
	box-shadow: var(--yop-vs-shadow-hero);
	z-index: 2;
}

.yop-vs-functions-dashboard-sidebar {
	padding: 22px 14px;
	background: linear-gradient(145deg, #181818 0%, #070707 100%);
	color: var(--yop-vs-white);
}

.yop-vs-functions-dashboard-brand {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 13px;
}

.yop-vs-functions-dashboard-brand span,
.yop-vs-functions-dashboard-brand__icon,
.yop-vs-functions-dashboard-brand .yvm-brand-mark {
	width: 22px;
	height: 22px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	object-fit: contain;
}

.yop-vs-functions-dashboard-sidebar nav {
	display: grid;
	gap: 6px;
}

.yop-vs-functions-dashboard-sidebar a {
	display: flex;
	align-items: center;
	gap: 9px;
	min-height: 34px;
	padding: 0 10px;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 11px;
	font-weight: 800;
	text-decoration: none;
}

.yop-vs-functions-dashboard-sidebar a.is-active {
	background: var(--yop-vs-orange);
	color: var(--yop-vs-white);
}

.yop-vs-functions-dashboard-sidebar a span {
	color: currentColor;
	font-size: 12px;
}

.yop-vs-functions-dashboard-main {
	padding: 26px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

.yop-vs-functions-dashboard-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}

.yop-vs-functions-dashboard-top span {
	display: block;
	margin-bottom: 5px;
	color: var(--yop-vs-orange);
	font-size: 10px;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.yop-vs-functions-dashboard-top strong {
	color: var(--yop-vs-black);
	font-size: 22px;
	font-weight: 950;
	letter-spacing: -0.04em;
}

.yop-vs-functions-dashboard-dots {
	display: flex;
	gap: 8px;
}

.yop-vs-functions-dashboard-dots i {
	width: 24px;
	height: 24px;
	border-radius: 999px;
	background: var(--yop-vs-orange-ultra-soft);
	border: 1px solid var(--yop-vs-border);
}

.yop-vs-functions-kpis {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 14px;
}

.yop-vs-functions-kpis div,
.yop-vs-functions-panel {
	border: 1px solid var(--yop-vs-border);
	border-radius: 18px;
	background: var(--yop-vs-white);
	box-shadow: 0 10px 24px rgba(16, 16, 16, 0.04);
}

.yop-vs-functions-kpis div {
	padding: 16px;
}

.yop-vs-functions-kpis span {
	display: block;
	color: var(--yop-vs-muted);
	font-size: 11px;
	font-weight: 800;
}

.yop-vs-functions-kpis strong {
	display: block;
	margin-top: 8px;
	color: var(--yop-vs-black);
	font-size: 26px;
	font-weight: 950;
	letter-spacing: -0.05em;
}

.yop-vs-functions-kpis small {
	display: inline-flex;
	margin-top: 8px;
	color: var(--yop-vs-orange);
	font-size: 10px;
	font-weight: 900;
}

.yop-vs-functions-dashboard-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.yop-vs-functions-panel {
	padding: 18px;
}

.yop-vs-functions-panel h3 {
	margin: 0 0 14px;
	color: var(--yop-vs-black);
	font-size: 14px;
	font-weight: 950;
	letter-spacing: -0.03em;
}

.yop-vs-functions-panel p {
	position: relative;
	margin: 0;
	padding: 11px 0 11px 18px;
	border-top: 1px solid rgba(233, 233, 233, 0.8);
}

.yop-vs-functions-panel p::before {
	content: "";
	position: absolute;
	top: 17px;
	left: 0;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--yop-vs-orange);
}

.yop-vs-functions-panel strong,
.yop-vs-functions-panel span {
	display: block;
}

.yop-vs-functions-panel strong {
	color: var(--yop-vs-black);
	font-size: 12px;
	font-weight: 900;
}

.yop-vs-functions-panel span {
	margin-top: 4px;
	color: var(--yop-vs-muted);
	font-size: 10.5px;
	font-weight: 700;
}

.yop-vs-functions-phone {
	position: absolute;
	right: -8px;
	bottom: 0;
	z-index: 4;
	width: 164px;
	min-height: 292px;
	padding: 18px 14px 14px;
	border: 8px solid var(--yop-vs-dark);
	border-radius: 28px;
	background: var(--yop-vs-white);
	box-shadow: 0 28px 70px rgba(16, 16, 16, 0.2);
}

.yop-vs-functions-phone-bar {
	width: 42px;
	height: 5px;
	margin: 0 auto 18px;
	border-radius: 999px;
	background: var(--yop-vs-border);
}

.yop-vs-functions-phone > strong {
	display: block;
	margin-bottom: 12px;
	color: var(--yop-vs-black);
	font-size: 13px;
	font-weight: 950;
}

.yop-vs-functions-phone-card {
	margin-bottom: 10px;
	padding: 11px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 14px;
	background: #fff;
}

.yop-vs-functions-phone-card span,
.yop-vs-functions-phone-card b {
	display: block;
}

.yop-vs-functions-phone-card span {
	color: var(--yop-vs-muted);
	font-size: 9px;
	font-weight: 800;
}

.yop-vs-functions-phone-card b {
	margin-top: 6px;
	color: var(--yop-vs-black);
	font-size: 18px;
	font-weight: 950;
}

.yop-vs-functions-phone-nav {
	display: flex;
	justify-content: space-between;
	margin-top: 18px;
	padding: 10px 7px 0;
	border-top: 1px solid var(--yop-vs-border);
}

.yop-vs-functions-phone-nav i {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: var(--yop-vs-orange-soft);
}

.yop-vs-functions-modules {
	padding: 76px 0 70px;
}

.yop-vs-section-heading {
	max-width: 760px;
	margin: 0 auto 38px;
	text-align: center;
}

.yop-vs-section-heading h2 {
	margin: 0;
	color: var(--yop-vs-black);
	font-size: clamp(31px, 4vw, 48px);
	font-weight: 950;
	line-height: 1.05;
	letter-spacing: -0.055em;
}

.yop-vs-section-heading p:not(.yop-vs-eyebrow) {
	margin: 16px auto 0;
	color: var(--yop-vs-muted);
	font-size: 16px;
	font-weight: 450;
	line-height: 1.7;
}

.yop-vs-module-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
}

.yop-vs-module-card {
	position: relative;
	min-height: 260px;
	padding: 24px;
	overflow: hidden;
	border: 1px solid var(--yop-vs-border);
	border-radius: 24px;
	background: var(--yop-vs-white);
	box-shadow: var(--yop-vs-shadow-card);
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.yop-vs-module-card::after {
	content: "";
	position: absolute;
	right: -54px;
	top: -54px;
	width: 132px;
	height: 132px;
	border-radius: 999px;
	background: radial-gradient(circle, rgba(255, 90, 0, 0.12), transparent 68%);
	pointer-events: none;
}

.yop-vs-module-card:hover {
	transform: translateY(-5px);
	border-color: rgba(255, 90, 0, 0.32);
	box-shadow: 0 18px 42px rgba(16, 16, 16, 0.1);
}

.yop-vs-module-card-top {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 22px;
}

.yop-vs-module-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: var(--yop-vs-orange-soft);
	color: var(--yop-vs-orange);
	font-size: 25px;
	font-weight: 950;
	box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.05);
}

.yop-vs-module-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--yop-vs-orange-ultra-soft);
	color: var(--yop-vs-orange);
	font-size: 10.5px;
	font-weight: 900;
}

.yop-vs-module-card h3 {
	position: relative;
	z-index: 1;
	margin: 0 0 13px;
	color: var(--yop-vs-black);
	font-size: 19px;
	font-weight: 950;
	line-height: 1.25;
	letter-spacing: -0.04em;
}

.yop-vs-module-card ul {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.yop-vs-module-card li {
	position: relative;
	padding-left: 13px;
	color: var(--yop-vs-text);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.35;
}

.yop-vs-module-card li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 0;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: var(--yop-vs-black);
}

.yop-vs-module-card-more {
	background: linear-gradient(145deg, var(--yop-vs-orange-ultra-soft), #ffffff);
}

.yop-vs-module-card-more p {
	position: relative;
	z-index: 1;
	margin: 0 0 18px;
	color: var(--yop-vs-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.65;
}

.yop-vs-module-card-more a {
	position: relative;
	z-index: 1;
	display: inline-flex;
	color: var(--yop-vs-orange);
	font-size: 13px;
	font-weight: 950;
	text-decoration: none;
}

.yop-vs-functions-benefits {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 0;
	margin-top: 26px;
	padding: 26px 18px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 24px;
	background: var(--yop-vs-white);
	box-shadow: var(--yop-vs-shadow-card);
}

.yop-vs-functions-benefits div {
	padding: 0 14px;
	text-align: center;
}

.yop-vs-functions-benefits span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	margin-bottom: 12px;
	border-radius: 14px;
	background: var(--yop-vs-orange-ultra-soft);
	color: var(--yop-vs-orange);
	font-size: 20px;
	font-weight: 950;
}

.yop-vs-functions-benefits strong {
	display: block;
	color: var(--yop-vs-black);
	font-size: 14px;
	font-weight: 950;
	letter-spacing: -0.03em;
}

.yop-vs-functions-benefits p {
	margin: 8px 0 0;
	color: var(--yop-vs-muted);
	font-size: 12px;
	font-weight: 650;
	line-height: 1.45;
}

.yop-vs-functions-cta {
	padding: 0 0 86px;
}

.yop-vs-functions-cta-box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) 360px;
	gap: 34px;
	align-items: center;
	overflow: hidden;
	padding: 54px;
	border-radius: 30px;
	background:
		radial-gradient(circle at 72% 50%, rgba(255, 90, 0, 0.2), transparent 28%),
		linear-gradient(145deg, #181818 0%, #080808 100%);
	box-shadow: var(--yop-vs-shadow-hero);
}

.yop-vs-functions-cta-box::before {
	content: "";
	position: absolute;
	inset: auto auto -95px 42%;
	width: 320px;
	height: 320px;
	border: 1px solid rgba(255, 90, 0, 0.26);
	border-radius: 999px;
	pointer-events: none;
}

.yop-vs-functions-cta-copy,
.yop-vs-functions-security-card {
	position: relative;
	z-index: 1;
}

.yop-vs-functions-cta h2 {
	max-width: 640px;
	margin: 0;
	color: var(--yop-vs-white);
	font-size: clamp(34px, 4vw, 54px);
	font-weight: 950;
	line-height: 1.02;
	letter-spacing: -0.055em;
}

.yop-vs-functions-cta p:not(.yop-vs-eyebrow) {
	max-width: 650px;
	margin: 18px 0 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 16px;
	font-weight: 450;
	line-height: 1.7;
}

.yop-vs-functions-cta-points {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 26px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 12px;
	font-weight: 850;
}

.yop-vs-functions-security-card {
	padding: 30px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
	backdrop-filter: blur(18px);
}

.yop-vs-functions-security-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 82px;
	margin-bottom: 22px;
	border-radius: 24px;
	background: var(--yop-vs-orange);
	color: var(--yop-vs-white);
	font-size: 36px;
	font-weight: 950;
	box-shadow: var(--yop-vs-shadow-orange);
}

.yop-vs-functions-security-card h3 {
	margin: 0;
	color: var(--yop-vs-white);
	font-size: 23px;
	font-weight: 950;
	line-height: 1.15;
	letter-spacing: -0.04em;
}

.yop-vs-functions-security-card p {
	margin-top: 14px !important;
	font-size: 14px !important;
}

@media (max-width: 1180px) {
	.yop-vs-functions-hero-grid {
		grid-template-columns: 1fr;
	}

	.yop-vs-functions-dashboard {
		margin: 0;
	}

	.yop-vs-module-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.yop-vs-functions-benefits {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px 0;
	}

	.yop-vs-functions-cta-box {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 860px) {
	.yop-vs-functions-shell {
		width: min(100% - 28px, 1440px);
	}

	.yop-vs-functions-hero {
		padding: 60px 0 54px;
	}

	.yop-vs-functions-hero-copy h1 {
		font-size: clamp(38px, 12vw, 56px);
	}

	.yop-vs-functions-hero-text {
		font-size: 15.5px;
	}

	.yop-vs-functions-hero-actions,
	.yop-vs-functions-trust {
		flex-direction: column;
		align-items: stretch;
	}

	.yop-vs-btn {
		width: 100%;
	}

	.yop-vs-functions-mockup-wrap {
		min-height: auto;
	}

	.yop-vs-functions-dashboard {
		grid-template-columns: 1fr;
		width: 100%;
		min-height: auto;
	}

	.yop-vs-functions-dashboard-sidebar {
		display: none;
	}

	.yop-vs-functions-dashboard-main {
		padding: 18px;
	}

	.yop-vs-functions-kpis,
	.yop-vs-functions-dashboard-panels {
		grid-template-columns: 1fr;
	}

	.yop-vs-functions-phone {
		position: relative;
		right: auto;
		bottom: auto;
		width: 100%;
		max-width: 240px;
		margin: 18px auto 0;
	}

	.yop-vs-module-grid {
		grid-template-columns: 1fr;
	}

	.yop-vs-functions-benefits {
		grid-template-columns: 1fr;
		padding: 20px;
	}

	.yop-vs-functions-benefits div {
		padding: 14px 0;
	}

	.yop-vs-functions-cta-box {
		padding: 32px 22px;
		border-radius: 24px;
	}

	.yop-vs-functions-security-card {
		padding: 24px;
	}
}

/* ============================================================
   Vereinssuite Funktionen Landingpage - Robust Feinschliff 1.1.2
   Zweck: Hero-Zeilenumbruch und einheitliche CI-SVG-Icons
   ============================================================ */

body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 {
	max-width: 760px !important;
	font-size: clamp(40px, 4.85vw, 70px) !important;
	letter-spacing: -0.065em !important;
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 span {
	display: inline-block !important;
	color: var(--yop-vs-orange) !important;
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-text {
	max-width: 690px !important;
}

/* Einheitliche Icon-Basis */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card,
body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits div {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 4h7v7H4zM13 4h7v4h-7zM13 10h7v10h-7zM4 13h7v7H4z'/%3E%3C/svg%3E");
}

/* Emoji-/Systemicons vollständig neutralisieren */
body.page-template-page-yop-vs-functions-php .yop-vs-module-icon,
body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits span {
	position: relative !important;
	overflow: hidden !important;
	color: transparent !important;
	font-size: 0 !important;
	line-height: 0 !important;
	text-indent: -9999px !important;
	white-space: nowrap !important;
}

body.page-template-page-yop-vs-functions-php .yop-vs-module-icon::before,
body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits span::before {
	content: "" !important;
	position: absolute !important;
	inset: 50% auto auto 50% !important;
	display: block !important;
	width: 25px !important;
	height: 25px !important;
	background: var(--yop-vs-orange) !important;
	transform: translate(-50%, -50%) !important;
	-webkit-mask: var(--yop-vs-card-icon) center / contain no-repeat !important;
	mask: var(--yop-vs-card-icon) center / contain no-repeat !important;
	text-indent: 0 !important;
}

/* 1. Dashboard */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(1) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 4h7v7H4zM13 4h7v4h-7zM13 10h7v10h-7zM4 13h7v7H4z'/%3E%3C/svg%3E");
}

/* 2. Mein Bereich */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(2) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 21a8 8 0 0 0-16 0M12 13a5 5 0 1 0 0-10 5 5 0 0 0 0 10z'/%3E%3C/svg%3E");
}

/* 3. Verein */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(3) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 11 12 4l9 7M5 10v10h14V10M9 20v-6h6v6'/%3E%3C/svg%3E");
}

/* 4. Mitglieder */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(4) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* 5. Teams */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(5) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E");
}

/* 6. Finanzen */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(6) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M18 7a7 7 0 1 0 0 10M5 10h10M5 14h10'/%3E%3C/svg%3E");
}

/* 7. Sponsoring */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(7) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M8 12 4 16a3 3 0 0 0 4 4l3-3M16 12l4 4a3 3 0 0 1-4 4l-3-3M9 9l2-2a3 3 0 0 1 4 0l2 2'/%3E%3C/svg%3E");
}

/* 8. Termine */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(8) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 2v4M17 2v4M3 10h18M5 5h14a2 2 0 0 1 2 2v13H3V7a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
}

/* 9. Kommunikation */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(9) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 4h16v12H5l-1 4V4zM7 8h10M7 12h7'/%3E%3C/svg%3E");
}

/* 10. Dokumente */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(10) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 7h7l2 2h9v10H3V7zM3 7V5h6l2 2'/%3E%3C/svg%3E");
}

/* 11. Anträge */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(11) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 3h8l4 4v14H7V3zM15 3v5h5M9 13h6M9 17h4'/%3E%3C/svg%3E");
}

/* 12. Weitere Module */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card:nth-child(12) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 2v7M12 15v7M2 12h7M15 12h7M5 5l5 5M14 14l5 5M19 5l-5 5M10 14l-5 5'/%3E%3C/svg%3E");
}

/* Benefit Icons */
body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits div:nth-child(1) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 2 4 6v12l8 4 8-4V6l-8-4zM4 6l8 4 8-4M12 10v12'/%3E%3C/svg%3E");
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits div:nth-child(2) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M17.5 19H7a5 5 0 1 1 1-9.9A7 7 0 0 1 21 12a4 4 0 0 1-3.5 7z'/%3E%3C/svg%3E");
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits div:nth-child(3) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 2 4 5v6c0 5 3.5 9.5 8 11 4.5-1.5 8-6 8-11V5l-8-3zM9 12l2 2 4-5'/%3E%3C/svg%3E");
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits div:nth-child(4) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.87'/%3E%3C/svg%3E");
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits div:nth-child(5) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 14 3 21l7-2 9-9a4 4 0 0 0-5-5l-9 9zM14 5l5 5M9 15l3 3'/%3E%3C/svg%3E");
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits div:nth-child(6) {
	--yop-vs-card-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 19V5M4 19h16M8 16v-5M12 16V8M16 16v-9'/%3E%3C/svg%3E");
}

/* Ruhigere Kartenwirkung */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card {
	border-radius: 26px !important;
}

body.page-template-page-yop-vs-functions-php .yop-vs-module-card li::before {
	background: var(--yop-vs-orange) !important;
	box-shadow: 0 0 0 3px rgba(255, 90, 0, 0.08) !important;
}

/* Mobile */
@media (max-width: 860px) {
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 {
		font-size: clamp(36px, 11vw, 52px) !important;
		letter-spacing: -0.055em !important;
	}
}

/* ============================================================
   Vereinssuite Funktionen Landingpage - Final Polish 1.1.3
   Zweck: Listenpunkte und CTA-Zeilen final sauber darstellen
   ============================================================ */

/* Modulkarten: Listen stabilisieren und Überlagerungen entfernen */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card ul {
	position: relative !important;
	z-index: 2 !important;
	display: grid !important;
	gap: 7px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body.page-template-page-yop-vs-functions-php .yop-vs-module-card li {
	position: relative !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 0 0 19px !important;
	color: var(--yop-vs-text) !important;
	font-size: 12.25px !important;
	font-weight: 750 !important;
	line-height: 1.42 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	overflow: visible !important;
	letter-spacing: -0.01em !important;
}

body.page-template-page-yop-vs-functions-php .yop-vs-module-card li *,
body.page-template-page-yop-vs-functions-php .yop-vs-module-card li::selection {
	text-decoration: none !important;
	text-shadow: none !important;
}

/* Alte Bullet-Darstellungen vollständig überschreiben */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card li::before {
	content: "" !important;
	position: absolute !important;
	top: 0.38em !important;
	left: 0 !important;
	display: block !important;
	width: 11px !important;
	height: 11px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: var(--yop-vs-orange) !important;
	box-shadow: none !important;
	transform: none !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8.1 13.8 4.4 10.1 5.8 8.7l2.3 2.3 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat !important;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='black' d='M8.1 13.8 4.4 10.1 5.8 8.7l2.3 2.3 5.9-5.9 1.4 1.4z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}

/* Modulkarten minimal höher, damit Listen nicht gedrückt wirken */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card {
	min-height: 274px !important;
}

/* Weitere-Module-Karte ohne Listenfix beeinflussen */
body.page-template-page-yop-vs-functions-php .yop-vs-module-card-more {
	min-height: 274px !important;
}

/* CTA-Punkte unten sauber umbrechen */
body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta-points {
	position: relative !important;
	z-index: 2 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 12px 22px !important;
	max-width: 760px !important;
	overflow: visible !important;
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta-points span {
	display: inline-flex !important;
	align-items: center !important;
	max-width: 100% !important;
	white-space: normal !important;
	line-height: 1.35 !important;
}

/* CTA-Kreis darf Text nicht optisch schneiden */
body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta-box::before {
	opacity: 0.55 !important;
	pointer-events: none !important;
}

/* Kleine optische Beruhigung bei langen Headline-Zeilen */
body.page-template-page-yop-vs-functions-php .yop-vs-section-heading h2 {
	max-width: 820px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Desktop: Karten etwas ruhiger ausrichten */
@media (min-width: 1181px) {
	body.page-template-page-yop-vs-functions-php .yop-vs-module-grid {
		align-items: stretch !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card h3 {
		min-height: 48px !important;
		display: flex !important;
		align-items: flex-end !important;
	}
}

/* Mobile: Listen gut lesbar halten */
@media (max-width: 860px) {
	body.page-template-page-yop-vs-functions-php .yop-vs-module-card {
		min-height: auto !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card h3 {
		min-height: auto !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card li {
		font-size: 13px !important;
		line-height: 1.5 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta-points {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 10px !important;
	}
}

/* ============================================================
   Vereinssuite Funktionen Landingpage - Mobile Finalfix 1.1.5
   Zweck: Mobile Ansicht final kompakt, ruhig und CI-konform
   ============================================================ */

@media (max-width: 860px) {
	body.page-template-page-yop-vs-functions-php {
		overflow-x: hidden !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-page {
		background:
			radial-gradient(circle at 85% 2%, rgba(255, 90, 0, 0.13), transparent 210px),
			linear-gradient(180deg, #ffffff 0%, #fbfbfb 48%, #ffffff 100%) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-shell {
		width: min(100% - 28px, 1440px) !important;
	}

	/* Hero mobil deutlich kompakter */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero {
		padding: 38px 0 38px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 28px !important;
		align-items: start !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-eyebrow {
		margin-bottom: 11px !important;
		font-size: 10.5px !important;
		line-height: 1.3 !important;
		letter-spacing: 0.075em !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 {
		max-width: 100% !important;
		font-size: clamp(34px, 11vw, 44px) !important;
		line-height: 0.98 !important;
		letter-spacing: -0.06em !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 span {
		display: inline !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-text {
		max-width: 100% !important;
		margin-top: 18px !important;
		font-size: 14px !important;
		line-height: 1.62 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-actions {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 10px !important;
		margin-top: 20px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-btn {
		width: 100% !important;
		min-height: 48px !important;
		padding: 0 18px !important;
		border-radius: 12px !important;
		font-size: 12px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-trust {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 8px !important;
		margin-top: 18px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-trust span {
		font-size: 12px !important;
		line-height: 1.35 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-trust strong {
		width: 20px !important;
		height: 20px !important;
		font-size: 10px !important;
		flex: 0 0 20px !important;
	}

	/* Mobile Mockup: kompakt statt langer Desktop-App */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-mockup-wrap {
		min-height: 0 !important;
		margin-top: 2px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-glow {
		display: none !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard {
		display: block !important;
		width: 100% !important;
		min-height: 0 !important;
		margin: 0 !important;
		border-radius: 22px !important;
		box-shadow: 0 18px 46px rgba(16, 16, 16, 0.11) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-sidebar {
		display: none !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-main {
		padding: 16px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-top {
		margin-bottom: 12px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-top span {
		font-size: 9px !important;
		margin-bottom: 4px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-top strong {
		font-size: 18px !important;
		line-height: 1.15 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-dots i {
		width: 18px !important;
		height: 18px !important;
	}

	/* KPI-Karten mobil nebeneinander, damit der Hero nicht zu lang wird */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 8px !important;
		margin-bottom: 0 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis div {
		padding: 10px 8px !important;
		border-radius: 14px !important;
		min-width: 0 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis span {
		font-size: 8.5px !important;
		line-height: 1.25 !important;
		white-space: normal !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis strong {
		margin-top: 5px !important;
		font-size: 18px !important;
		line-height: 1.05 !important;
		letter-spacing: -0.045em !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis small {
		margin-top: 5px !important;
		font-size: 8px !important;
		line-height: 1.1 !important;
	}

	/* Detail-Panels im mobilen Hero ausblenden, damit die Seite sofort schneller zur Modulübersicht kommt */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-panels {
		display: none !important;
	}

	/* Separates Phone-Mockup mobil ausblenden: Die Seite selbst ist bereits im Mobile-Kontext */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-phone {
		display: none !important;
	}

	/* Modulsektion mobil kompakter */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-modules {
		padding: 42px 0 42px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-section-heading {
		max-width: 100% !important;
		margin-bottom: 24px !important;
		padding: 0 2px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-section-heading h2 {
		max-width: 100% !important;
		font-size: clamp(25px, 8.2vw, 32px) !important;
		line-height: 1.08 !important;
		letter-spacing: -0.055em !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-section-heading p:not(.yop-vs-eyebrow) {
		margin-top: 12px !important;
		font-size: 13px !important;
		line-height: 1.55 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-grid {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 14px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card {
		min-height: 0 !important;
		padding: 18px !important;
		border-radius: 20px !important;
		box-shadow: 0 9px 24px rgba(16, 16, 16, 0.055) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card::after {
		right: -52px !important;
		top: -52px !important;
		width: 118px !important;
		height: 118px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card-top {
		margin-bottom: 16px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-icon {
		width: 46px !important;
		height: 46px !important;
		border-radius: 14px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-icon::before {
		width: 21px !important;
		height: 21px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-badge {
		min-height: 24px !important;
		padding: 0 8px !important;
		font-size: 9.5px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card h3 {
		min-height: 0 !important;
		display: block !important;
		margin-bottom: 11px !important;
		font-size: 17px !important;
		line-height: 1.2 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card ul {
		gap: 6px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card li {
		font-size: 12.5px !important;
		line-height: 1.42 !important;
		padding-left: 17px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card li::before {
		top: 0.35em !important;
		width: 10px !important;
		height: 10px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card-more p {
		font-size: 13px !important;
		line-height: 1.55 !important;
		margin-bottom: 12px !important;
	}

	/* Benefit-Leiste mobil kompakter */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 0 !important;
		margin-top: 16px !important;
		padding: 14px !important;
		border-radius: 20px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits div {
		padding: 12px 8px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits span {
		width: 36px !important;
		height: 36px !important;
		margin-bottom: 8px !important;
		border-radius: 12px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits span::before {
		width: 18px !important;
		height: 18px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits strong {
		font-size: 12px !important;
		line-height: 1.25 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits p {
		margin-top: 6px !important;
		font-size: 10.5px !important;
		line-height: 1.35 !important;
	}

	/* CTA mobil klarer */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta {
		padding: 0 0 44px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta-box {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 20px !important;
		padding: 28px 20px !important;
		border-radius: 22px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta h2 {
		font-size: clamp(27px, 9vw, 36px) !important;
		line-height: 1.04 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta p:not(.yop-vs-eyebrow) {
		margin-top: 14px !important;
		font-size: 13.5px !important;
		line-height: 1.6 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta-points {
		display: grid !important;
		grid-template-columns: 1fr !important;
		gap: 8px !important;
		margin-top: 18px !important;
		font-size: 10.5px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-card {
		padding: 22px !important;
		border-radius: 20px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-icon {
		width: 60px !important;
		height: 60px !important;
		margin-bottom: 16px !important;
		border-radius: 18px !important;
		font-size: 28px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-card h3 {
		font-size: 20px !important;
		line-height: 1.13 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-card p {
		font-size: 12.5px !important;
		line-height: 1.55 !important;
	}
}

/* Sehr kleine Smartphones */
@media (max-width: 380px) {
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-shell {
		width: min(100% - 22px, 1440px) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 {
		font-size: clamp(31px, 10.5vw, 38px) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis {
		grid-template-columns: 1fr !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits {
		grid-template-columns: 1fr !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card {
		padding: 16px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card h3 {
		font-size: 16px !important;
	}
}

/* ============================================================
   Vereinssuite Funktionen Landingpage - Mobile Compact Fix 1.1.6
   Zweck: Hero-H1 stabil + mobile Modulkarten kompakt
   ============================================================ */

/* Stabile Hero-Headline mit echten Zeilen */
body.page-template-page-yop-vs-functions-php #yop-vs-functions-title .yop-vs-h1-line {
	display: block !important;
	color: var(--yop-vs-black) !important;
}

body.page-template-page-yop-vs-functions-php #yop-vs-functions-title .yop-vs-h1-highlight {
	color: var(--yop-vs-orange) !important;
}

/* Alte generische Span-Regeln sicher überschreiben */
body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 span.yop-vs-h1-line {
	display: block !important;
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 span.yop-vs-h1-highlight {
	display: block !important;
	color: var(--yop-vs-orange) !important;
}

/* Desktop bleibt großzügig */
@media (min-width: 861px) {
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 {
		max-width: 760px !important;
		font-size: clamp(42px, 4.85vw, 70px) !important;
		line-height: 0.98 !important;
		letter-spacing: -0.065em !important;
	}
}

/* Mobile Final-Komprimierung */
@media (max-width: 860px) {
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero {
		padding-top: 32px !important;
		padding-bottom: 34px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-grid {
		gap: 22px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 {
		max-width: 100% !important;
		font-size: clamp(31px, 9.7vw, 40px) !important;
		line-height: 1.01 !important;
		letter-spacing: -0.058em !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 .yop-vs-h1-line {
		display: block !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-text {
		margin-top: 15px !important;
		font-size: 13.25px !important;
		line-height: 1.55 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-actions {
		margin-top: 17px !important;
		gap: 8px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-trust {
		margin-top: 15px !important;
		gap: 7px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-trust span {
		font-size: 11.3px !important;
	}

	/* Mobile Dashboard noch kompakter */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard {
		border-radius: 20px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-main {
		padding: 13px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-top {
		margin-bottom: 10px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-top strong {
		font-size: 16px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 6px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis div {
		padding: 8px 6px !important;
		border-radius: 12px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis span {
		font-size: 7.8px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis strong {
		font-size: 16px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis small {
		font-size: 7.5px !important;
	}

	/* Sektion kompakter */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-modules {
		padding-top: 34px !important;
		padding-bottom: 34px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-section-heading {
		margin-bottom: 20px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-section-heading h2 {
		font-size: clamp(24px, 7.4vw, 30px) !important;
		line-height: 1.05 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-section-heading p:not(.yop-vs-eyebrow) {
		font-size: 12.4px !important;
		line-height: 1.45 !important;
	}

	/* Mobile Karten: kompakt, aber lesbar */
	body.page-template-page-yop-vs-functions-php .yop-vs-module-grid {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card {
		min-height: 0 !important;
		padding: 15px !important;
		border-radius: 18px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card-top {
		align-items: center !important;
		margin-bottom: 12px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-icon {
		width: 40px !important;
		height: 40px !important;
		border-radius: 12px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-icon::before {
		width: 18px !important;
		height: 18px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-badge {
		min-height: 21px !important;
		padding: 0 7px !important;
		font-size: 8.8px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card h3 {
		margin-bottom: 8px !important;
		font-size: 15.5px !important;
		line-height: 1.15 !important;
		letter-spacing: -0.035em !important;
		min-height: 0 !important;
		display: block !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card ul {
		gap: 4px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card li {
		font-size: 11.15px !important;
		line-height: 1.35 !important;
		padding-left: 14px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card li::before {
		top: 0.36em !important;
		width: 8px !important;
		height: 8px !important;
	}

	/* Mobil nur wichtigste 3 Punkte zeigen, damit die Landingpage nicht endlos lang wird */
	body.page-template-page-yop-vs-functions-php .yop-vs-module-card:not(.yop-vs-module-card-more) li:nth-child(n+4) {
		display: none !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card-more p {
		font-size: 11.5px !important;
		line-height: 1.45 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card-more a {
		font-size: 11.5px !important;
	}

	/* Benefit-Leiste mobil noch kompakter */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		margin-top: 14px !important;
		padding: 10px !important;
		border-radius: 18px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits div {
		padding: 10px 6px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits span {
		width: 31px !important;
		height: 31px !important;
		margin-bottom: 6px !important;
		border-radius: 10px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits span::before {
		width: 15px !important;
		height: 15px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits strong {
		font-size: 10.8px !important;
		line-height: 1.2 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits p {
		font-size: 9.4px !important;
		line-height: 1.28 !important;
	}

	/* CTA mobil weniger hoch */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta {
		padding-bottom: 34px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta-box {
		gap: 16px !important;
		padding: 24px 18px !important;
		border-radius: 20px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta h2 {
		font-size: clamp(25px, 8vw, 32px) !important;
		line-height: 1.04 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta p:not(.yop-vs-eyebrow) {
		font-size: 12.4px !important;
		line-height: 1.5 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-card {
		padding: 18px !important;
		border-radius: 18px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-icon {
		width: 52px !important;
		height: 52px !important;
		margin-bottom: 13px !important;
		border-radius: 16px !important;
		font-size: 24px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-card h3 {
		font-size: 18px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-card p {
		font-size: 11.7px !important;
		line-height: 1.48 !important;
	}
}

/* Ab ca. 390px echte kompakte 2-Spalten-Mobile-Karten */
@media (min-width: 390px) and (max-width: 860px) {
	body.page-template-page-yop-vs-functions-php .yop-vs-module-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card {
		padding: 13px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card-top {
		margin-bottom: 10px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-icon {
		width: 36px !important;
		height: 36px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-icon::before {
		width: 16px !important;
		height: 16px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-badge {
		font-size: 8px !important;
		min-height: 19px !important;
		padding: 0 6px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card h3 {
		font-size: 13.2px !important;
		line-height: 1.18 !important;
		margin-bottom: 8px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card li {
		font-size: 9.5px !important;
		line-height: 1.35 !important;
		padding-left: 12px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card li::before {
		width: 7px !important;
		height: 7px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card-more {
		grid-column: span 2 !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card-more p {
		font-size: 11px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-card-more a {
		font-size: 11px !important;
	}
}

/* Sehr kleine Smartphones bleiben einspaltig */
@media (max-width: 389px) {
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-shell {
		width: min(100% - 22px, 1440px) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy h1 {
		font-size: clamp(29px, 10vw, 36px) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-kpis {
		grid-template-columns: 1fr !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-module-grid {
		grid-template-columns: 1fr !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-benefits {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================
   Vereinssuite Funktionen Landingpage - Mobile Finalfix 1.1.7
   Zweck: Mobile Overlay, Section-Heading und CTA final korrigieren
   ============================================================ */

/* Grundsätzlich kein blauer Tap-/Focus-Overlay */
body.page-template-page-yop-vs-functions-php,
body.page-template-page-yop-vs-functions-php * {
	-webkit-tap-highlight-color: rgba(255, 90, 0, 0.08) !important;
}

body.page-template-page-yop-vs-functions-php .yop-vs-functions-page {
	isolation: isolate !important;
}

@media (max-width: 860px) {

	/* Header/Hero CI-konform erzwingen */
	body.page-template-page-yop-vs-functions-php,
	body.page-template-page-yop-vs-functions-php .site,
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-page,
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero,
	body.page-template-page-yop-vs-functions-php .yop-vs-home-header,
	body.page-template-page-yop-vs-functions-php header {
		background-color: #ffffff !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero {
		position: relative !important;
		overflow: visible !important;
		background:
			radial-gradient(circle at 88% 0%, rgba(255, 90, 0, 0.12), transparent 190px),
			linear-gradient(180deg, #ffffff 0%, #ffffff 68%, #fbfbfb 100%) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero::before,
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero::after,
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-page::before,
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-page::after {
		display: none !important;
		content: none !important;
		background: transparent !important;
	}

	/* Mobile Header darf keinen Farbschleier erzeugen */
	body.page-template-page-yop-vs-functions-php .yop-vs-home-header,
	body.page-template-page-yop-vs-functions-php .yop-vs-home-header-inner {
		backdrop-filter: none !important;
		-webkit-backdrop-filter: none !important;
		box-shadow: 0 1px 0 rgba(233, 233, 233, 0.9) !important;
	}

	/* Hero-Text sicher sichtbar und ohne Überlagerung */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero-copy,
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-mockup-wrap,
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard {
		position: relative !important;
		z-index: 2 !important;
		filter: none !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
	}

	body.page-template-page-yop-vs-functions-php #yop-vs-functions-title,
	body.page-template-page-yop-vs-functions-php #yop-vs-functions-title .yop-vs-h1-line {
		color: var(--yop-vs-black) !important;
		opacity: 1 !important;
		filter: none !important;
	}

	body.page-template-page-yop-vs-functions-php #yop-vs-functions-title .yop-vs-h1-highlight {
		color: var(--yop-vs-orange) !important;
	}

	/* Modulüberschrift nicht mehr anschneiden */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-modules {
		position: relative !important;
		z-index: 3 !important;
		margin-top: 0 !important;
		padding-top: 52px !important;
		overflow: visible !important;
		background: linear-gradient(180deg, #fbfbfb 0%, #ffffff 100%) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-section-heading {
		position: relative !important;
		z-index: 4 !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
		overflow: visible !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-section-heading h2 {
		display: block !important;
		overflow: visible !important;
		clip-path: none !important;
		transform: none !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	/* Mobile Dashboard sauber, nicht blau überlagert */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard {
		background: #ffffff !important;
		border-color: rgba(233, 233, 233, 0.95) !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-dashboard-main {
		background: linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
	}

	/* CTA mobil vollständig anzeigen */
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta {
		overflow: visible !important;
		padding-bottom: 44px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-cta-box {
		overflow: hidden !important;
		min-height: auto !important;
		height: auto !important;
		padding-bottom: 30px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-card {
		display: block !important;
		min-height: auto !important;
		height: auto !important;
		margin-bottom: 0 !important;
		overflow: visible !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-card h3,
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-security-card p {
		overflow: visible !important;
		display: block !important;
		-webkit-line-clamp: unset !important;
		line-clamp: unset !important;
	}

	/* Footer mobil etwas sauberer */
	body.page-template-page-yop-vs-functions-php footer {
		position: relative !important;
		z-index: 2 !important;
		background: #101010 !important;
	}
}

/* DevTools-Highlight kann CSS nicht entfernen; diese Regeln verhindern echte CSS-Farbschleier */
@media (max-width: 480px) {
	body.page-template-page-yop-vs-functions-php .yop-vs-functions-hero {
		padding-top: 30px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-functions-modules {
		padding-top: 48px !important;
	}

	body.page-template-page-yop-vs-functions-php .yop-vs-section-heading h2 {
		font-size: clamp(23px, 7.2vw, 29px) !important;
		line-height: 1.08 !important;
	}
}

.yop-vs-addon-price-list {
	display: grid;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.yop-vs-addon-price-list li {
	color: var(--yop-vs-text, #343434);
	font-size: 11px;
	line-height: 1.35;
}

.yop-vs-addon-price-list strong {
	color: var(--yop-vs-orange, #ff5a00);
	font-weight: 900;
}