/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_design_system",
  "sub_feature": "global_elementor_frontend_styles",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "elementor_design_system",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.1",
  "last_updated": "2026-06-17",
  "last_change": "Initiales Vereinssuite Designsystem mit Hero, Buttons, Karten, Dashboard-Mockup, Pricing und Responsive-Grundlage erstellt.",
  "area": "asset",
  "review_note": "CSS verwendet yop-vs-Prefix, ist Elementor-kompatibel und enthält keine App-/Datenlogik.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Vereinssuite Design Tokens
   ========================================================== */

: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-light-muted: #8a8a8a;

	--yop-vs-white: #ffffff;
	--yop-vs-bg: #fbfbfb;
	--yop-vs-bg-soft: #f7f7f7;
	--yop-vs-border: #e9e9e9;
	--yop-vs-border-strong: #dcdcdc;

	--yop-vs-success: #18a957;
	--yop-vs-warning: #f0a300;
	--yop-vs-danger: #d73a31;

	--yop-vs-radius-xs: 8px;
	--yop-vs-radius-sm: 10px;
	--yop-vs-radius-md: 14px;
	--yop-vs-radius-lg: 20px;
	--yop-vs-radius-xl: 28px;

	--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-orange: 0 12px 26px rgba(255, 90, 0, 0.22);

	--yop-vs-container: 1440px;
	--yop-vs-container-narrow: 1180px;

	--yop-vs-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	--yop-vs-font-normal: 14px;
	--yop-vs-font-table: 13px;
	--yop-vs-font-table-head: 10.5px;
	--yop-vs-font-button: 12px;
	--yop-vs-font-badge: 10.5px;
	--yop-vs-font-kpi: 22px;
	--yop-vs-font-page-title: 30px;
	--yop-vs-font-section-title: 21px;
	--yop-vs-font-module-title: 18px;
	--yop-vs-font-card-title: 15px;
}

/* ==========================================================
   Basis
   ========================================================== */

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	color: var(--yop-vs-text);
	background: var(--yop-vs-bg);
	font-family: var(--yop-vs-font-main);
	font-size: var(--yop-vs-font-normal);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--yop-vs-orange);
	text-decoration: none;
	transition: color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

a:hover {
	color: var(--yop-vs-orange-dark);
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	color: var(--yop-vs-white);
	background: var(--yop-vs-orange);
}

.elementor-section,
.elementor-container,
.elementor-widget-wrap,
.e-con,
.e-con-inner {
	box-sizing: border-box;
}

/* ==========================================================
   Layout-Helfer für Elementor
   ========================================================== */

.yop-vs-container {
	width: 100%;
	max-width: var(--yop-vs-container);
	margin-right: auto;
	margin-left: auto;
}

.yop-vs-container-narrow {
	width: 100%;
	max-width: var(--yop-vs-container-narrow);
	margin-right: auto;
	margin-left: auto;
}

.yop-vs-section {
	padding: 80px 24px;
}

.yop-vs-section-small {
	padding: 52px 24px;
}

.yop-vs-section-top {
	padding-top: 80px;
}

.yop-vs-section-bottom {
	padding-bottom: 80px;
}

.yop-vs-bg-white {
	background: var(--yop-vs-white);
}

.yop-vs-bg-soft {
	background: var(--yop-vs-bg-soft);
}

.yop-vs-text-center {
	text-align: center;
}

.yop-vs-hidden-desktop {
	display: none;
}

/* ==========================================================
   Typografie
   ========================================================== */

.yop-vs-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	color: var(--yop-vs-orange);
	font-size: 12px;
	font-weight: 850;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.yop-vs-heading-xl,
.yop-vs-heading-xl h1,
.yop-vs-heading-xl h2 {
	margin: 0;
	color: var(--yop-vs-black);
	font-size: clamp(30px, 5vw, 64px);
	font-weight: 900;
	line-height: 1.04;
	letter-spacing: -0.055em;
}

.yop-vs-heading-lg,
.yop-vs-heading-lg h2 {
	margin: 0;
	color: var(--yop-vs-black);
	font-size: clamp(28px, 3.5vw, 46px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: -0.045em;
}

.yop-vs-heading-md,
.yop-vs-heading-md h2,
.yop-vs-heading-md h3 {
	margin: 0;
	color: var(--yop-vs-black);
	font-size: var(--yop-vs-font-section-title);
	font-weight: 850;
	line-height: 1.18;
	letter-spacing: -0.025em;
}

.yop-vs-heading-sm,
.yop-vs-heading-sm h3,
.yop-vs-card-title {
	margin: 0;
	color: var(--yop-vs-black);
	font-size: var(--yop-vs-font-card-title);
	font-weight: 850;
	line-height: 1.25;
}

.yop-vs-orange-text,
.yop-vs-heading-xl strong,
.yop-vs-heading-lg strong,
.yop-vs-heading-md strong {
	color: var(--yop-vs-orange);
}

.yop-vs-subline,
.yop-vs-subline p {
	margin: 18px 0 0;
	color: var(--yop-vs-muted);
	font-size: clamp(15px, 1.35vw, 18px);
	font-weight: 450;
	line-height: 1.65;
}

.yop-vs-small-text {
	color: var(--yop-vs-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* ==========================================================
   Buttons
   ========================================================== */

.yop-vs-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
	margin-top: 30px;
}

.yop-vs-btn-primary .elementor-button,
.yop-vs-btn-primary.elementor-widget-button .elementor-button,
a.yop-vs-btn-primary,
button.yop-vs-btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 15px 28px;
	border: 1px solid var(--yop-vs-orange);
	border-radius: var(--yop-vs-radius-sm);
	color: var(--yop-vs-white);
	background: var(--yop-vs-orange);
	box-shadow: var(--yop-vs-shadow-orange);
	font-size: var(--yop-vs-font-button);
	font-weight: 850;
	letter-spacing: 0.01em;
	line-height: 1;
	cursor: pointer;
	transition: all 0.18s ease;
}

.yop-vs-btn-primary .elementor-button:hover,
a.yop-vs-btn-primary:hover,
button.yop-vs-btn-primary:hover {
	color: var(--yop-vs-white);
	background: var(--yop-vs-orange-dark);
	border-color: var(--yop-vs-orange-dark);
	transform: translateY(-1px);
}

.yop-vs-btn-secondary .elementor-button,
.yop-vs-btn-secondary.elementor-widget-button .elementor-button,
a.yop-vs-btn-secondary,
button.yop-vs-btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 15px 28px;
	border: 1px solid var(--yop-vs-black);
	border-radius: var(--yop-vs-radius-sm);
	color: var(--yop-vs-black);
	background: var(--yop-vs-white);
	font-size: var(--yop-vs-font-button);
	font-weight: 850;
	line-height: 1;
	cursor: pointer;
	transition: all 0.18s ease;
}

.yop-vs-btn-secondary .elementor-button:hover,
a.yop-vs-btn-secondary:hover,
button.yop-vs-btn-secondary:hover {
	color: var(--yop-vs-white);
	background: var(--yop-vs-black);
	transform: translateY(-1px);
}

/* ==========================================================
   Header
   Elementor Header-Section Klasse: yop-vs-site-header
   ========================================================== */

.yop-vs-site-header {
	position: sticky;
	top: 0;
	z-index: 999;
	border-bottom: 1px solid rgba(233, 233, 233, 0.86);
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	transition: box-shadow 0.18s ease, background-color 0.18s ease;
}

html[data-yop-vs-scrolled="true"] .yop-vs-site-header {
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.045);
}

.yop-vs-logo-text {
	color: var(--yop-vs-black);
	font-size: 24px;
	font-weight: 900;
	letter-spacing: -0.035em;
	line-height: 1;
}

.yop-vs-logo-text span {
	color: var(--yop-vs-orange);
}

.yop-vs-site-header .elementor-nav-menu a {
	color: var(--yop-vs-black);
	font-size: 13px;
	font-weight: 750;
}

.yop-vs-site-header .elementor-nav-menu a:hover,
.yop-vs-site-header .elementor-nav-menu .elementor-item-active {
	color: var(--yop-vs-orange);
}

/* ==========================================================
   Hero
   Elementor Section Klasse: yop-vs-hero
   ========================================================== */

.yop-vs-hero {
	position: relative;
	overflow: hidden;
	padding: 84px 24px 58px;
	background:
		radial-gradient(circle at 96% 52%, rgba(255, 90, 0, 0.22), transparent 0 20%, transparent 43%),
		linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

.yop-vs-hero::before {
	content: "";
	position: absolute;
	top: 168px;
	left: 0;
	width: 135px;
	height: 260px;
	background-image: radial-gradient(var(--yop-vs-orange) 1.35px, transparent 1.35px);
	background-size: 18px 18px;
	opacity: 0.48;
	pointer-events: none;
}

.yop-vs-hero::after {
	content: "";
	position: absolute;
	right: -170px;
	bottom: -250px;
	width: 560px;
	height: 560px;
	border-radius: 999px;
	background: var(--yop-vs-orange);
	opacity: 0.12;
	pointer-events: none;
}

.yop-vs-hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.28fr);
	gap: 54px;
	align-items: center;
	max-width: var(--yop-vs-container);
	margin: 0 auto;
}

.yop-vs-hero-copy {
	max-width: 580px;
}

.yop-vs-hero-trust-row {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 28px;
	align-items: center;
	margin-top: 28px;
}

.yop-vs-hero-trust-item {
	display: inline-flex;
	gap: 10px;
	align-items: center;
	color: var(--yop-vs-black);
	font-size: 13px;
	font-weight: 750;
}

.yop-vs-hero-trust-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	color: var(--yop-vs-orange);
	background: var(--yop-vs-orange-soft);
}

/* ==========================================================
   App-/Dashboard-Mockup
   ========================================================== */

.yop-vs-dashboard-preview {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--yop-vs-border);
	border-radius: 18px;
	background: var(--yop-vs-white);
	box-shadow: var(--yop-vs-shadow-soft);
}

.yop-vs-dashboard-preview-inner {
	display: grid;
	grid-template-columns: 230px minmax(0, 1fr);
	min-height: 445px;
}

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

.yop-vs-dashboard-sidebar-logo {
	margin-bottom: 24px;
	color: var(--yop-vs-white);
	font-size: 17px;
	font-weight: 900;
	letter-spacing: -0.02em;
}

.yop-vs-dashboard-menu {
	display: grid;
	gap: 8px;
}

.yop-vs-dashboard-menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 38px;
	padding: 9px 12px;
	border-radius: 9px;
	color: rgba(255, 255, 255, 0.78);
	font-size: 13px;
	font-weight: 750;
}

.yop-vs-dashboard-menu-item.is-active {
	color: var(--yop-vs-white);
	background: var(--yop-vs-orange);
}

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

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

.yop-vs-dashboard-title {
	margin: 0;
	color: var(--yop-vs-black);
	font-size: 21px;
	font-weight: 900;
	line-height: 1.15;
	letter-spacing: -0.035em;
}

.yop-vs-dashboard-subtitle {
	margin-top: 4px;
	color: var(--yop-vs-muted);
	font-size: 13px;
}

.yop-vs-dashboard-user {
	display: flex;
	gap: 10px;
	align-items: center;
	justify-content: flex-end;
	min-width: 150px;
	color: var(--yop-vs-muted);
	font-size: 12px;
	font-weight: 700;
}

.yop-vs-dashboard-avatar {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	background:
		linear-gradient(135deg, var(--yop-vs-orange-soft), #ffffff);
	border: 1px solid var(--yop-vs-border);
}

.yop-vs-dashboard-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.yop-vs-dashboard-card {
	min-height: 118px;
	padding: 18px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 14px;
	background: var(--yop-vs-white);
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.035);
}

.yop-vs-dashboard-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-bottom: 12px;
	border-radius: 10px;
	color: var(--yop-vs-orange);
	background: var(--yop-vs-orange-soft);
	font-weight: 900;
}

.yop-vs-dashboard-card-label {
	color: var(--yop-vs-black);
	font-size: 13px;
	font-weight: 850;
	line-height: 1.2;
}

.yop-vs-dashboard-card-number {
	margin-top: 5px;
	color: var(--yop-vs-black);
	font-size: var(--yop-vs-font-kpi);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.035em;
}

.yop-vs-dashboard-card-link {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	margin-top: 15px;
	color: var(--yop-vs-orange);
	font-size: 12px;
	font-weight: 850;
}

/* ==========================================================
   Feature Strip
   ========================================================== */

.yop-vs-feature-strip {
	position: relative;
	z-index: 5;
	max-width: var(--yop-vs-container);
	margin: -30px auto 0;
	padding: 0 24px;
}

.yop-vs-feature-strip-inner {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	overflow: hidden;
	border: 1px solid var(--yop-vs-border);
	border-radius: 14px;
	background: var(--yop-vs-white);
	box-shadow: var(--yop-vs-shadow-card);
}

.yop-vs-feature-mini {
	display: flex;
	gap: 13px;
	align-items: center;
	padding: 20px;
	border-right: 1px solid var(--yop-vs-border);
}

.yop-vs-feature-mini:last-child {
	border-right: 0;
}

.yop-vs-feature-mini-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	color: var(--yop-vs-orange);
	background: var(--yop-vs-orange-soft);
	font-weight: 900;
}

.yop-vs-feature-mini-title {
	color: var(--yop-vs-black);
	font-size: 13px;
	font-weight: 850;
	line-height: 1.2;
}

.yop-vs-feature-mini-text {
	margin-top: 3px;
	color: var(--yop-vs-muted);
	font-size: 12px;
	line-height: 1.35;
}

/* ==========================================================
   Karten / Module / Vereinsarten
   ========================================================== */

.yop-vs-card {
	border: 1px solid var(--yop-vs-border);
	border-radius: var(--yop-vs-radius-lg);
	background: var(--yop-vs-white);
	box-shadow: var(--yop-vs-shadow-card);
}

.yop-vs-card-padding {
	padding: 30px;
}

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

.yop-vs-icon-card {
	padding: 24px 18px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 16px;
	background: var(--yop-vs-white);
	text-align: center;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.yop-vs-icon-card:hover {
	border-color: rgba(255, 90, 0, 0.34);
	box-shadow: var(--yop-vs-shadow-card);
	transform: translateY(-3px);
}

.yop-vs-icon-card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 13px;
	border-radius: 999px;
	color: var(--yop-vs-orange);
	background: var(--yop-vs-orange-soft);
	font-size: 22px;
	font-weight: 900;
}

.yop-vs-icon-card-title {
	color: var(--yop-vs-black);
	font-size: 13px;
	font-weight: 850;
	line-height: 1.25;
}

/* ==========================================================
   Pricing / Pakete
   ========================================================== */

.yop-vs-pricing-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}

.yop-vs-pricing-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 30px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 18px;
	background: var(--yop-vs-white);
	box-shadow: var(--yop-vs-shadow-card);
}

.yop-vs-pricing-card.is-highlight {
	border-color: var(--yop-vs-orange);
	box-shadow: 0 18px 44px rgba(255, 90, 0, 0.16);
}

.yop-vs-pricing-badge {
	position: absolute;
	top: -13px;
	right: 22px;
	padding: 5px 12px;
	border-radius: 999px;
	color: var(--yop-vs-white);
	background: var(--yop-vs-orange);
	font-size: var(--yop-vs-font-badge);
	font-weight: 900;
	line-height: 1;
}

.yop-vs-pricing-name {
	color: var(--yop-vs-black);
	font-size: var(--yop-vs-font-module-title);
	font-weight: 900;
	line-height: 1.2;
}

.yop-vs-pricing-description {
	margin-top: 5px;
	color: var(--yop-vs-muted);
	font-size: 12px;
}

.yop-vs-pricing-price {
	margin: 18px 0;
	color: var(--yop-vs-black);
	font-size: 34px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: -0.045em;
}

.yop-vs-pricing-price span {
	color: var(--yop-vs-muted);
	font-size: 13px;
	font-weight: 750;
	letter-spacing: 0;
}

.yop-vs-pricing-list {
	display: grid;
	gap: 10px;
	margin: 10px 0 26px;
	padding: 0;
	list-style: none;
}

.yop-vs-pricing-list li {
	position: relative;
	padding-left: 23px;
	color: var(--yop-vs-text);
	font-size: 13px;
	line-height: 1.35;
}

.yop-vs-pricing-list li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--yop-vs-orange);
	font-weight: 900;
}

.yop-vs-pricing-action {
	margin-top: auto;
}

/* ==========================================================
   Sicherheit / SaaS Vertrauen
   ========================================================== */

.yop-vs-security-box {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 290px;
	gap: 34px;
	align-items: center;
	padding: 34px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 22px;
	background: var(--yop-vs-white);
	box-shadow: var(--yop-vs-shadow-card);
}

.yop-vs-check-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.yop-vs-check-list li {
	position: relative;
	padding-left: 24px;
	color: var(--yop-vs-text);
	font-size: 13px;
	font-weight: 750;
	line-height: 1.35;
}

.yop-vs-check-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--yop-vs-orange);
	font-weight: 950;
}

.yop-vs-shield-visual {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 220px;
	border-radius: 18px;
	color: var(--yop-vs-orange);
	background:
		radial-gradient(circle at 80% 20%, rgba(255, 90, 0, 0.18), transparent 0 24%, transparent 52%),
		linear-gradient(135deg, var(--yop-vs-orange-soft), #ffffff);
	font-size: 74px;
	font-weight: 950;
}

/* ==========================================================
   Statistik
   ========================================================== */

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

.yop-vs-stat-card {
	padding: 24px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 16px;
	background: var(--yop-vs-white);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.035);
}

.yop-vs-stat-number {
	color: var(--yop-vs-orange);
	font-size: var(--yop-vs-font-kpi);
	font-weight: 950;
	line-height: 1;
	letter-spacing: -0.035em;
}

.yop-vs-stat-label {
	margin-top: 8px;
	color: var(--yop-vs-muted);
	font-size: 12px;
	font-weight: 750;
	line-height: 1.35;
}

/* ==========================================================
   CTA
   ========================================================== */

.yop-vs-cta {
	overflow: hidden;
	border-radius: 24px;
	background:
		radial-gradient(circle at 86% 50%, rgba(255, 255, 255, 0.18), transparent 0 22%, transparent 48%),
		linear-gradient(135deg, var(--yop-vs-black), #2b2b2b);
	color: var(--yop-vs-white);
}

.yop-vs-cta h1,
.yop-vs-cta h2,
.yop-vs-cta h3,
.yop-vs-cta p {
	color: var(--yop-vs-white);
}

.yop-vs-cta .yop-vs-subline,
.yop-vs-cta .yop-vs-subline p {
	color: rgba(255, 255, 255, 0.76);
}

/* ==========================================================
   Responsive
   ========================================================== */

@media (max-width: 1200px) {
	.yop-vs-feature-strip-inner {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.yop-vs-feature-mini:nth-child(3n) {
		border-right: 0;
	}

	.yop-vs-dashboard-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

	.yop-vs-hero-copy {
		max-width: 780px;
	}

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

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

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

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

@media (max-width: 767px) {
	body {
		font-size: 14px;
	}

	.yop-vs-section {
		padding: 56px 18px;
	}

	.yop-vs-section-small {
		padding: 38px 18px;
	}

	.yop-vs-hero {
		padding: 54px 18px 38px;
	}

	.yop-vs-hero::before {
		width: 90px;
		height: 190px;
		opacity: 0.28;
	}

	.yop-vs-btn-row {
		display: grid;
		grid-template-columns: 1fr;
	}

	.yop-vs-btn-primary .elementor-button,
	.yop-vs-btn-secondary .elementor-button,
	a.yop-vs-btn-primary,
	a.yop-vs-btn-secondary,
	button.yop-vs-btn-primary,
	button.yop-vs-btn-secondary {
		width: 100%;
	}

	.yop-vs-feature-strip {
		margin-top: 0;
		padding: 0 18px;
	}

	.yop-vs-feature-strip-inner {
		grid-template-columns: 1fr;
	}

	.yop-vs-feature-mini {
		border-right: 0;
		border-bottom: 1px solid var(--yop-vs-border);
	}

	.yop-vs-feature-mini:last-child {
		border-bottom: 0;
	}

	.yop-vs-dashboard-preview-inner {
		grid-template-columns: 1fr;
	}

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

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

	.yop-vs-dashboard-topbar {
		align-items: flex-start;
		flex-direction: column;
	}

	.yop-vs-dashboard-user {
		justify-content: flex-start;
	}

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

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

	.yop-vs-card-padding,
	.yop-vs-pricing-card,
	.yop-vs-security-box {
		padding: 24px;
	}

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

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

	.yop-vs-hidden-mobile {
		display: none !important;
	}

	.yop-vs-hidden-desktop {
		display: block;
	}
}

/* YOP_VS_HOME_STEP_2_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "homepage_layout_styles",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "marketing_homepage_styles",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.2",
  "last_updated": "2026-06-17",
  "last_change": "Startseiten-spezifische Styles für Header, Hero, Dashboard, Paketbereich, Vereinsarten, Sicherheit, Statistiken und CTA ergänzt.",
  "area": "asset",
  "review_note": "Reine Design-Erweiterung für Elementor/Marketing-Seite ohne App-Logik und ohne Datenbankzugriff.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Vereinssuite Homepage Wrapper
   ========================================================== */

.yop-vs-home {
	background: #ffffff;
	color: var(--yop-vs-text);
	overflow-x: clip;
}

.yop-vs-home * {
	box-sizing: border-box;
}

/* ==========================================================
   Homepage Header
   ========================================================== */

.yop-vs-home-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid rgba(233, 233, 233, 0.86);
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

html[data-yop-vs-scrolled="true"] .yop-vs-home-header {
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.045);
}

.yop-vs-home-header-inner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 28px;
	align-items: center;
	width: 100%;
	max-width: var(--yop-vs-container);
	min-height: 76px;
	margin: 0 auto;
	padding: 0 24px;
}

.yop-vs-home-brand {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	color: var(--yop-vs-black);
	font-weight: 950;
	line-height: 1;
}

.yop-vs-home-brand:hover {
	color: var(--yop-vs-black);
}

.yop-vs-home-brand-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	color: var(--yop-vs-orange);
}

.yop-vs-home-brand-icon img,
.yop-vs-home-brand-icon .yvm-brand-mark {
	display: block;
	width: 38px;
	height: 38px;
	object-fit: contain;
}

.yop-vs-home-brand-text {
	color: var(--yop-vs-orange);
	font-size: 26px;
	font-weight: 950;
	letter-spacing: -0.045em;
	text-transform: none;
}

.yop-vs-home-brand-text span {
	color: var(--yop-vs-black);
}

.yop-vs-home-nav {
	display: flex;
	gap: 34px;
	align-items: center;
	justify-content: center;
}

.yop-vs-home-nav a {
	color: var(--yop-vs-black);
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
}

.yop-vs-home-nav a:hover {
	color: var(--yop-vs-orange);
}

.yop-vs-home-header-actions {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: flex-end;
}

.yop-vs-home-login {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 11px 22px;
	border: 1px solid var(--yop-vs-border-strong);
	border-radius: 8px;
	color: var(--yop-vs-black);
	background: var(--yop-vs-white);
	font-size: 12px;
	font-weight: 850;
	line-height: 1;
}

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

.yop-vs-home-header-actions .yop-vs-btn-primary {
	min-height: 42px;
	padding: 12px 22px;
	box-shadow: none;
}

/* ==========================================================
   Hero Feinschliff
   ========================================================== */

.yop-vs-home-hero {
	padding-top: 74px;
}

.yop-vs-home-hero .yop-vs-heading-xl {
	max-width: 650px;
}

.yop-vs-home-hero .yop-vs-dashboard-preview {
	transform: translateY(8px);
}

/* ==========================================================
   Dreierbereich: Vereinsarten, Pakete, Sicherheit
   ========================================================== */

.yop-vs-home-grid-3 {
	display: grid;
	grid-template-columns: 0.9fr 1.15fr 1fr;
	gap: 22px;
	align-items: stretch;
}

.yop-vs-home-grid-3 > * {
	min-width: 0;
}

.yop-vs-home-club-card,
.yop-vs-home-pricing-card,
.yop-vs-home-security-card {
	height: 100%;
}

.yop-vs-home-club-card .yop-vs-heading-md,
.yop-vs-home-pricing-card .yop-vs-heading-md,
.yop-vs-home-security-card .yop-vs-heading-md {
	margin-bottom: 22px;
}

.yop-vs-home-club-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 24px;
}

.yop-vs-home-club-grid .yop-vs-icon-card {
	padding: 18px 10px;
}

.yop-vs-home-club-grid .yop-vs-icon-card-icon {
	width: 46px;
	height: 46px;
	margin-bottom: 10px;
	font-size: 20px;
}

.yop-vs-home-pricing-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 22px;
}

.yop-vs-home-pricing-grid .yop-vs-pricing-card {
	padding: 22px;
}

.yop-vs-home-pricing-grid .yop-vs-pricing-price {
	font-size: 26px;
}

.yop-vs-home-pricing-grid .yop-vs-btn-primary,
.yop-vs-home-pricing-grid .yop-vs-btn-secondary {
	width: 100%;
	min-height: 42px;
	padding: 12px 16px;
	font-size: 12px;
	box-shadow: none;
}

.yop-vs-home-security-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 22px;
}

.yop-vs-home-security-card .yop-vs-shield-visual {
	min-height: 190px;
}

/* ==========================================================
   CTA Feinschliff
   ========================================================== */

.yop-vs-home-cta {
	padding: 42px;
}

.yop-vs-home-cta-content {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 34px;
	align-items: center;
}

.yop-vs-home-cta-actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: stretch;
	min-width: 260px;
}

.yop-vs-home-cta-actions .yop-vs-btn-primary {
	width: 100%;
}

.yop-vs-home-cta-link {
	display: inline-flex;
	justify-content: center;
	color: var(--yop-vs-white);
	font-size: 13px;
	font-weight: 850;
}

.yop-vs-home-cta-link:hover {
	color: rgba(255, 255, 255, 0.78);
}

/* ==========================================================
   Responsive Startseite
   ========================================================== */

@media (max-width: 1320px) {
	.yop-vs-home-grid-3 {
		grid-template-columns: 1fr;
	}

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

	.yop-vs-home-security-card {
		grid-template-columns: minmax(0, 1fr) 280px;
	}
}

@media (max-width: 1100px) {
	.yop-vs-home-header-inner {
		grid-template-columns: auto auto;
		justify-content: space-between;
	}

	.yop-vs-home-nav {
		display: none;
	}

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

	.yop-vs-home-security-card {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.yop-vs-home-header-inner {
		min-height: 68px;
		padding: 0 18px;
	}

	.yop-vs-home-brand-icon,
	.yop-vs-home-brand-icon svg {
		width: 32px;
		height: 32px;
	}

	.yop-vs-home-brand-text {
		font-size: 22px;
	}

	.yop-vs-home-header-actions {
		gap: 8px;
	}

	.yop-vs-home-login {
		display: none;
	}

	.yop-vs-home-header-actions .yop-vs-btn-primary {
		min-height: 38px;
		padding: 11px 14px;
		font-size: 11px;
	}

	.yop-vs-home-hero {
		padding-top: 48px;
	}

	.yop-vs-home-club-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yop-vs-home-cta {
		padding: 28px;
	}

	.yop-vs-home-cta-content {
		grid-template-columns: 1fr;
	}

	.yop-vs-home-cta-actions {
		min-width: 0;
	}
}

@media (max-width: 420px) {
	.yop-vs-home-club-grid {
		grid-template-columns: 1fr;
	}
}
/* YOP_VS_HOME_STEP_2_END */

/* YOP_VS_HOME_STEP_3_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "hero_header_dashboard_visual_polish",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "marketing_homepage_visual_polish",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.3",
  "last_updated": "2026-06-17",
  "last_change": "Header, Hero, Dashboard-Mockup, Feature-Leiste und Mobile-Darstellung visuell nachgeschärft.",
  "area": "asset",
  "review_note": "Reine Design-Erweiterung für Elementor/Marketing-Seite ohne App-Logik, ohne Datenbankzugriff und ohne personenbezogene Daten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 3: Visuelle Schärfung
   ========================================================== */

:root {
	--yop-vs-header-height: 82px;
	--yop-vs-hero-gradient-orange: rgba(255, 90, 0, 0.18);
	--yop-vs-hero-gradient-orange-strong: rgba(255, 90, 0, 0.32);
	--yop-vs-dashboard-shadow-strong: 0 34px 90px rgba(16, 16, 16, 0.15);
	--yop-vs-dashboard-shadow-orange: 0 28px 80px rgba(255, 90, 0, 0.2);
}

/* ==========================================================
   Header stärker wie SaaS-Landingpage
   ========================================================== */

.yop-vs-home-header {
	min-height: var(--yop-vs-header-height);
}

.yop-vs-home-header::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 90, 0, 0.28) 18%,
		rgba(255, 90, 0, 0.06) 50%,
		rgba(255, 90, 0, 0.28) 82%,
		transparent 100%
	);
	pointer-events: none;
}

.yop-vs-home-header-inner {
	min-height: var(--yop-vs-header-height);
}

.yop-vs-home-brand {
	position: relative;
}

.yop-vs-home-brand-icon {
	position: relative;
	width: 38px;
	height: 38px;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.yop-vs-home-brand-icon::after {
	content: none;
}

.yop-vs-home-brand-icon img,
.yop-vs-home-brand-icon .yvm-brand-mark {
	width: 38px;
	height: 38px;
}

.yop-vs-home-nav {
	gap: 10px;
}

.yop-vs-home-nav a {
	position: relative;
	padding: 12px 13px;
	border-radius: 999px;
}

.yop-vs-home-nav a:hover {
	background: var(--yop-vs-orange-soft);
}

.yop-vs-home-header-actions .yop-vs-btn-primary {
	border-radius: 999px;
	box-shadow: 0 10px 22px rgba(255, 90, 0, 0.16);
}

.yop-vs-home-login {
	border-radius: 999px;
}

/* ==========================================================
   Hero stärker, plastischer, näher am Referenzstil
   ========================================================== */

.yop-vs-home-hero {
	position: relative;
	min-height: calc(100vh - var(--yop-vs-header-height));
	padding-top: 84px;
	padding-bottom: 78px;
	background:
		radial-gradient(circle at 91% 43%, var(--yop-vs-hero-gradient-orange-strong), transparent 0 19%, transparent 42%),
		radial-gradient(circle at 72% 12%, rgba(255, 90, 0, 0.12), transparent 0 18%, transparent 38%),
		linear-gradient(180deg, #ffffff 0%, #fbfbfb 68%, #f7f7f7 100%);
}

.yop-vs-home-hero::before {
	top: 138px;
	width: 168px;
	height: 318px;
	background-image: radial-gradient(rgba(255, 90, 0, 0.9) 1.3px, transparent 1.3px);
	background-size: 19px 19px;
	opacity: 0.34;
}

.yop-vs-home-hero::after {
	right: -190px;
	bottom: -250px;
	width: 620px;
	height: 620px;
	background:
		radial-gradient(circle at 34% 34%, rgba(255, 255, 255, 0.22), transparent 0 18%, transparent 44%),
		var(--yop-vs-orange);
	opacity: 0.15;
}

.yop-vs-home-hero .yop-vs-hero-grid {
	grid-template-columns: minmax(420px, 0.86fr) minmax(620px, 1.24fr);
	gap: 62px;
}

.yop-vs-home-hero .yop-vs-eyebrow {
	position: relative;
	padding: 8px 13px 8px 35px;
	border: 1px solid rgba(255, 90, 0, 0.22);
	border-radius: 999px;
	background: rgba(255, 241, 232, 0.72);
	box-shadow: 0 10px 26px rgba(255, 90, 0, 0.08);
}

.yop-vs-home-hero .yop-vs-eyebrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 13px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--yop-vs-orange);
	box-shadow: 0 0 0 6px rgba(255, 90, 0, 0.12);
	transform: translateY(-50%);
}

.yop-vs-home-hero .yop-vs-heading-xl {
	max-width: 700px;
	text-wrap: balance;
}

.yop-vs-home-hero .yop-vs-heading-xl strong {
	position: relative;
	display: inline-block;
}

.yop-vs-home-hero .yop-vs-heading-xl strong::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 4px;
	left: 0;
	z-index: -1;
	height: 12px;
	border-radius: 999px;
	background: rgba(255, 90, 0, 0.16);
}

.yop-vs-home-hero .yop-vs-subline {
	max-width: 610px;
}

.yop-vs-home-hero .yop-vs-btn-row {
	margin-top: 34px;
}

.yop-vs-home-hero .yop-vs-btn-primary,
.yop-vs-home-hero .yop-vs-btn-secondary {
	border-radius: 999px;
}

.yop-vs-home-hero .yop-vs-btn-primary {
	min-height: 56px;
	padding-right: 30px;
	padding-left: 30px;
	box-shadow: 0 16px 36px rgba(255, 90, 0, 0.25);
}

.yop-vs-home-hero .yop-vs-btn-secondary {
	min-height: 56px;
	padding-right: 30px;
	padding-left: 30px;
	box-shadow: 0 12px 28px rgba(16, 16, 16, 0.06);
}

.yop-vs-hero-trust-row {
	margin-top: 34px;
}

.yop-vs-hero-trust-item {
	padding: 8px 12px 8px 8px;
	border: 1px solid rgba(233, 233, 233, 0.9);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 8px 20px rgba(16, 16, 16, 0.035);
}

.yop-vs-hero-trust-icon {
	font-size: 13px;
	font-weight: 900;
}

/* ==========================================================
   Dashboard-Mockup hochwertiger darstellen
   ========================================================== */

.yop-vs-home-hero .yop-vs-dashboard-preview {
	position: relative;
	border: 1px solid rgba(255, 255, 255, 0.72);
	border-radius: 28px;
	background:
		linear-gradient(var(--yop-vs-white), var(--yop-vs-white)) padding-box,
		linear-gradient(135deg, rgba(255, 90, 0, 0.34), rgba(255, 255, 255, 0.88), rgba(16, 16, 16, 0.08)) border-box;
	box-shadow:
		var(--yop-vs-dashboard-shadow-strong),
		var(--yop-vs-dashboard-shadow-orange);
	transform: translateY(10px) rotate(-0.6deg);
}

.yop-vs-home-hero .yop-vs-dashboard-preview::before {
	content: "";
	position: absolute;
	top: -22px;
	right: 52px;
	z-index: -1;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: rgba(255, 90, 0, 0.22);
	filter: blur(22px);
	pointer-events: none;
}

.yop-vs-home-hero .yop-vs-dashboard-preview::after {
	content: "";
	position: absolute;
	right: 22px;
	bottom: -30px;
	z-index: -1;
	width: 280px;
	height: 90px;
	border-radius: 999px;
	background: rgba(16, 16, 16, 0.14);
	filter: blur(28px);
	pointer-events: none;
}

.yop-vs-dashboard-preview-inner {
	min-height: 492px;
	border-radius: 28px;
}

.yop-vs-dashboard-sidebar {
	position: relative;
	overflow: hidden;
	padding: 26px 22px;
	border-top-left-radius: 28px;
	border-bottom-left-radius: 28px;
	background:
		radial-gradient(circle at 20% 8%, rgba(255, 90, 0, 0.28), transparent 0 18%, transparent 44%),
		linear-gradient(180deg, #1c1c1c 0%, #090909 100%);
}

.yop-vs-dashboard-sidebar::after {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -80px;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	background: rgba(255, 90, 0, 0.18);
	filter: blur(4px);
	pointer-events: none;
}

.yop-vs-dashboard-sidebar-logo {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 30px;
}

.yop-vs-dashboard-sidebar-logo::before {
	content: "";
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: url("/wp-content/plugins/yop-vereinssuite/assets/brand/vereinssuite-icon-orange-white.png") center / contain no-repeat;
	box-shadow: none;
}

.yop-vs-dashboard-menu {
	position: relative;
	z-index: 2;
	gap: 9px;
}

.yop-vs-dashboard-menu-item {
	min-height: 41px;
	padding: 10px 13px;
	border: 1px solid rgba(255, 255, 255, 0.04);
	border-radius: 11px;
	background: rgba(255, 255, 255, 0.025);
	backdrop-filter: blur(10px);
}

.yop-vs-dashboard-menu-item.is-active {
	border-color: rgba(255, 255, 255, 0.13);
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.13), transparent),
		var(--yop-vs-orange);
	box-shadow: 0 12px 26px rgba(255, 90, 0, 0.28);
}

.yop-vs-dashboard-main {
	padding: 30px;
	border-top-right-radius: 28px;
	border-bottom-right-radius: 28px;
	background:
		radial-gradient(circle at 100% 0%, rgba(255, 90, 0, 0.11), transparent 0 20%, transparent 44%),
		linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

.yop-vs-dashboard-topbar {
	padding: 0 0 4px;
}

.yop-vs-dashboard-title {
	font-size: 23px;
}

.yop-vs-dashboard-user {
	padding: 8px 10px 8px 14px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 999px;
	background: var(--yop-vs-white);
	box-shadow: 0 8px 18px rgba(16, 16, 16, 0.04);
}

.yop-vs-dashboard-avatar {
	position: relative;
	background:
		radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.8), transparent 0 22%, transparent 46%),
		linear-gradient(135deg, var(--yop-vs-orange), #ff9a52);
}

.yop-vs-dashboard-cards {
	gap: 16px;
}

.yop-vs-dashboard-card {
	position: relative;
	overflow: hidden;
	min-height: 132px;
	padding: 19px;
	border-radius: 18px;
	background:
		linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.yop-vs-dashboard-card::after {
	content: "";
	position: absolute;
	right: -34px;
	bottom: -42px;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: rgba(255, 90, 0, 0.07);
	pointer-events: none;
}

.yop-vs-dashboard-card:hover {
	border-color: rgba(255, 90, 0, 0.24);
	box-shadow: 0 14px 30px rgba(16, 16, 16, 0.07);
	transform: translateY(-2px);
}

.yop-vs-dashboard-card-icon {
	position: relative;
	z-index: 2;
	width: 38px;
	height: 38px;
	border-radius: 13px;
	box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.11);
}

.yop-vs-dashboard-card-label,
.yop-vs-dashboard-card-number,
.yop-vs-dashboard-card-link {
	position: relative;
	z-index: 2;
}

.yop-vs-dashboard-card-number {
	font-size: 24px;
}

/* ==========================================================
   Feature-Leiste hochwertiger
   ========================================================== */

.yop-vs-feature-strip {
	margin-top: -38px;
}

.yop-vs-feature-strip-inner {
	border-radius: 20px;
	box-shadow:
		0 20px 46px rgba(16, 16, 16, 0.09),
		0 14px 36px rgba(255, 90, 0, 0.08);
}

.yop-vs-feature-mini {
	position: relative;
	padding: 22px 20px;
	background: rgba(255, 255, 255, 0.96);
	transition: background-color 0.18s ease, transform 0.18s ease;
}

.yop-vs-feature-mini:hover {
	background: var(--yop-vs-orange-ultra-soft);
	transform: translateY(-1px);
}

.yop-vs-feature-mini-icon {
	box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.12);
}

/* ==========================================================
   Responsive Feinschliff Step 3
   ========================================================== */

@media (max-width: 1280px) {
	.yop-vs-home-hero .yop-vs-hero-grid {
		grid-template-columns: minmax(360px, 0.88fr) minmax(540px, 1.12fr);
		gap: 42px;
	}

	.yop-vs-dashboard-preview-inner {
		grid-template-columns: 210px minmax(0, 1fr);
	}
}

@media (max-width: 1100px) {
	.yop-vs-home-hero {
		min-height: auto;
		padding-top: 68px;
	}

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

	.yop-vs-home-hero .yop-vs-dashboard-preview {
		transform: none;
	}

	.yop-vs-home-hero .yop-vs-dashboard-preview::before,
	.yop-vs-home-hero .yop-vs-dashboard-preview::after {
		display: none;
	}
}

@media (max-width: 767px) {
	:root {
		--yop-vs-header-height: 68px;
	}

	.yop-vs-home-header {
		min-height: var(--yop-vs-header-height);
	}

	.yop-vs-home-header-inner {
		min-height: var(--yop-vs-header-height);
	}

	.yop-vs-home-brand-icon {
		width: 36px;
		height: 36px;
		border-radius: 12px;
	}

	.yop-vs-home-brand-icon svg {
		width: 24px;
		height: 24px;
	}

	.yop-vs-home-brand-icon::after {
		right: -2px;
		bottom: -2px;
		width: 10px;
		height: 10px;
		border-width: 2px;
	}

	.yop-vs-home-hero {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.yop-vs-home-hero .yop-vs-eyebrow {
		padding: 7px 11px 7px 31px;
		font-size: 10.5px;
	}

	.yop-vs-home-hero .yop-vs-heading-xl {
		font-size: clamp(34px, 10vw, 48px);
		letter-spacing: -0.06em;
	}

	.yop-vs-home-hero .yop-vs-btn-primary,
	.yop-vs-home-hero .yop-vs-btn-secondary {
		min-height: 52px;
	}

	.yop-vs-hero-trust-row {
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.yop-vs-hero-trust-item {
		width: 100%;
	}

	.yop-vs-dashboard-preview-inner {
		min-height: auto;
	}

	.yop-vs-dashboard-main {
		border-radius: 28px;
	}

	.yop-vs-dashboard-title {
		font-size: 20px;
	}

	.yop-vs-dashboard-card {
		min-height: 118px;
	}

	.yop-vs-feature-strip {
		margin-top: 0;
	}
}
/* YOP_VS_HOME_STEP_3_END */

/* YOP_VS_HOME_STEP_4_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "static_frontpage_wordpress_fallback_styles",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "wordpress_homepage_layout_fallback",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.4",
  "last_updated": "2026-06-17",
  "last_change": "Fallback-Styles für statische WordPress-Startseite ergänzt, damit Hello-Elementor-Standardlayout die Vereinssuite-Startseite nicht einengt.",
  "area": "asset",
  "review_note": "Reine Design-Erweiterung ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

body.home,
body.page-template-elementor_canvas {
	background: #ffffff;
}

/* YOP_VS_HOME_HEADER_CI_FIX_START */
body.home .yop-vs-site-header,
body.home .yop-vs-site-header__inner {
	background: #ffffff;
	background-color: #ffffff;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

html[data-yop-vs-scrolled="true"] body.home .yop-vs-site-header {
	background: #ffffff;
	box-shadow: 0 12px 32px rgba(16, 16, 16, 0.07);
}
/* YOP_VS_HOME_HEADER_CI_FIX_END */


body.home .site-main,
body.home .page-content,
body.home .entry-content,
body.page-template-elementor_canvas .site-main,
body.page-template-elementor_canvas .page-content,
body.page-template-elementor_canvas .entry-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

body.home .page-header,
body.home .entry-header,
body.home .entry-title,
body.page-template-elementor_canvas .page-header,
body.page-template-elementor_canvas .entry-header,
body.page-template-elementor_canvas .entry-title {
	display: none;
}

body.admin-bar .yop-vs-home-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .yop-vs-home-header {
		top: 46px;
	}
}
/* YOP_VS_HOME_STEP_4_END */

/* YOP_VS_HOME_STEP_5_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "modules_feature_cards_section",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "marketing_modules_section_styles",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.5",
  "last_updated": "2026-06-17",
  "last_change": "Großen Modul-/Funktionsbereich mit responsiven Karten für die Vereinssuite Startseite ergänzt.",
  "area": "asset",
  "review_note": "Reine Design-Erweiterung für Marketing-Seite ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

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

.yop-vs-home-modules {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 6% 20%, rgba(255, 90, 0, 0.12), transparent 0 20%, transparent 42%),
		radial-gradient(circle at 94% 65%, rgba(255, 90, 0, 0.10), transparent 0 18%, transparent 44%),
		linear-gradient(180deg, #fbfbfb 0%, #ffffff 48%, #fbfbfb 100%);
}

.yop-vs-home-modules::before {
	content: "";
	position: absolute;
	top: 96px;
	right: 0;
	width: 156px;
	height: 260px;
	background-image: radial-gradient(rgba(255, 90, 0, 0.42) 1.2px, transparent 1.2px);
	background-size: 18px 18px;
	opacity: 0.45;
	pointer-events: none;
}

.yop-vs-module-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.yop-vs-module-card {
	position: relative;
	overflow: hidden;
	min-height: 310px;
	padding: 26px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 22px;
	background:
		linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
	box-shadow: var(--yop-vs-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.yop-vs-module-card::after {
	content: "";
	position: absolute;
	right: -48px;
	bottom: -58px;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: rgba(255, 90, 0, 0.08);
	pointer-events: none;
}

.yop-vs-module-card:hover {
	border-color: rgba(255, 90, 0, 0.34);
	box-shadow: 0 18px 44px rgba(16, 16, 16, 0.10);
	transform: translateY(-4px);
}

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

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

.yop-vs-module-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 26px;
	padding: 6px 10px;
	border: 1px solid rgba(255, 90, 0, 0.18);
	border-radius: 999px;
	color: var(--yop-vs-orange);
	background: rgba(255, 241, 232, 0.72);
	font-size: var(--yop-vs-font-badge);
	font-weight: 900;
	line-height: 1;
}

.yop-vs-module-card h3 {
	position: relative;
	z-index: 2;
	margin: 0 0 11px;
	color: var(--yop-vs-black);
	font-size: 20px;
	font-weight: 900;
	line-height: 1.18;
	letter-spacing: -0.035em;
}

.yop-vs-module-card p {
	position: relative;
	z-index: 2;
	margin: 0;
	color: var(--yop-vs-muted);
	font-size: 13px;
	line-height: 1.55;
}

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

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

.yop-vs-module-card li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--yop-vs-orange);
	font-weight: 950;
}

.yop-vs-module-card.is-featured {
	border-color: rgba(255, 90, 0, 0.38);
	background:
		radial-gradient(circle at 88% 18%, rgba(255, 90, 0, 0.16), transparent 0 22%, transparent 48%),
		linear-gradient(180deg, #ffffff 0%, #fff8f3 100%);
	box-shadow:
		0 20px 52px rgba(255, 90, 0, 0.14),
		0 12px 32px rgba(16, 16, 16, 0.06);
}

.yop-vs-module-card.is-dark {
	border-color: rgba(255, 255, 255, 0.08);
	background:
		radial-gradient(circle at 86% 18%, rgba(255, 90, 0, 0.34), transparent 0 24%, transparent 50%),
		linear-gradient(180deg, #202020 0%, #0d0d0d 100%);
	box-shadow:
		0 20px 56px rgba(16, 16, 16, 0.18),
		0 18px 42px rgba(255, 90, 0, 0.12);
}

.yop-vs-module-card.is-dark h3,
.yop-vs-module-card.is-dark li {
	color: var(--yop-vs-white);
}

.yop-vs-module-card.is-dark p {
	color: rgba(255, 255, 255, 0.72);
}

.yop-vs-module-card.is-dark .yop-vs-module-badge {
	border-color: rgba(255, 255, 255, 0.14);
	color: var(--yop-vs-white);
	background: rgba(255, 255, 255, 0.08);
}

.yop-vs-module-card.is-dark .yop-vs-module-icon {
	color: var(--yop-vs-white);
	background: var(--yop-vs-orange);
	box-shadow: 0 14px 30px rgba(255, 90, 0, 0.26);
}

@media (max-width: 1200px) {
	.yop-vs-module-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.yop-vs-home-section-head {
		margin-bottom: 28px;
		text-align: left;
	}

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

	.yop-vs-module-card {
		min-height: auto;
		padding: 24px;
	}
}
/* YOP_VS_HOME_STEP_5_END */

/* YOP_VS_HOME_STEP_6_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "pricing_security_showcase_section",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "marketing_pricing_security_styles",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.6",
  "last_updated": "2026-06-17",
  "last_change": "Große Pricing- und Security-Showcase-Sektion für die Vereinssuite Startseite ergänzt.",
  "area": "asset",
  "review_note": "Reine Design-Erweiterung ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 6: Pricing & Security Showcase
   ========================================================== */

.yop-vs-home-pricing-security {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 8% 14%, rgba(255, 90, 0, 0.13), transparent 0 19%, transparent 42%),
		radial-gradient(circle at 94% 22%, rgba(255, 90, 0, 0.16), transparent 0 22%, transparent 46%),
		linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

.yop-vs-home-pricing-security::before {
	content: "";
	position: absolute;
	top: 120px;
	left: -76px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: rgba(255, 90, 0, 0.11);
	filter: blur(8px);
	pointer-events: none;
}

.yop-vs-home-pricing-security::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 160px;
	width: 148px;
	height: 260px;
	background-image: radial-gradient(rgba(255, 90, 0, 0.44) 1.2px, transparent 1.2px);
	background-size: 18px 18px;
	opacity: 0.42;
	pointer-events: none;
}

.yop-vs-pricing-hero-grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	align-items: stretch;
	margin-bottom: 42px;
}

.yop-vs-pricing-hero-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding: 32px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 26px;
	background:
		linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
	box-shadow: var(--yop-vs-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.yop-vs-pricing-hero-card:hover {
	border-color: rgba(255, 90, 0, 0.32);
	box-shadow: 0 20px 50px rgba(16, 16, 16, 0.11);
	transform: translateY(-4px);
}

.yop-vs-pricing-hero-card.is-highlight {
	border-color: rgba(255, 90, 0, 0.48);
	background:
		radial-gradient(circle at 86% 10%, rgba(255, 90, 0, 0.18), transparent 0 22%, transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #fff7f1 100%);
	box-shadow:
		0 24px 62px rgba(255, 90, 0, 0.17),
		0 14px 34px rgba(16, 16, 16, 0.07);
	transform: translateY(-12px);
}

.yop-vs-pricing-hero-card.is-highlight:hover {
	transform: translateY(-16px);
}

.yop-vs-pricing-highlight-badge {
	position: absolute;
	top: -14px;
	left: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 7px 16px;
	border-radius: 999px;
	color: var(--yop-vs-white);
	background: var(--yop-vs-orange);
	box-shadow: 0 12px 26px rgba(255, 90, 0, 0.22);
	font-size: var(--yop-vs-font-badge);
	font-weight: 950;
	line-height: 1;
	transform: translateX(-50%);
}

.yop-vs-pricing-hero-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 18px;
	margin-bottom: 24px;
}

.yop-vs-pricing-kicker {
	display: block;
	margin-bottom: 8px;
	color: var(--yop-vs-orange);
	font-size: var(--yop-vs-font-badge);
	font-weight: 950;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.yop-vs-pricing-hero-card h3 {
	margin: 0;
	color: var(--yop-vs-black);
	font-size: 24px;
	font-weight: 950;
	line-height: 1.1;
	letter-spacing: -0.045em;
}

.yop-vs-pricing-hero-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border-radius: 18px;
	color: var(--yop-vs-orange);
	background: var(--yop-vs-orange-soft);
	box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.14);
	font-size: 22px;
	font-weight: 950;
}

.yop-vs-pricing-hero-price {
	margin-bottom: 18px;
	color: var(--yop-vs-black);
	font-size: 42px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: -0.055em;
}

.yop-vs-pricing-hero-price span {
	color: var(--yop-vs-muted);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0;
}

.yop-vs-pricing-hero-card p {
	margin: 0;
	color: var(--yop-vs-muted);
	font-size: 13px;
	line-height: 1.58;
}

.yop-vs-pricing-hero-list {
	display: grid;
	gap: 11px;
	margin: 24px 0 30px;
	padding: 0;
	list-style: none;
}

.yop-vs-pricing-hero-list li {
	position: relative;
	padding-left: 25px;
	color: var(--yop-vs-text);
	font-size: 13px;
	font-weight: 760;
	line-height: 1.35;
}

.yop-vs-pricing-hero-list li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--yop-vs-orange);
	font-weight: 950;
}

.yop-vs-pricing-hero-card .yop-vs-btn-primary,
.yop-vs-pricing-hero-card .yop-vs-btn-secondary {
	width: 100%;
	margin-top: auto;
	border-radius: 999px;
}

/* ==========================================================
   Security Showcase
   ========================================================== */

.yop-vs-security-showcase {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 440px;
	gap: 42px;
	align-items: center;
	overflow: hidden;
	padding: 42px;
	border: 1px solid rgba(255, 90, 0, 0.18);
	border-radius: 30px;
	background:
		radial-gradient(circle at 88% 20%, rgba(255, 90, 0, 0.18), transparent 0 22%, transparent 52%),
		linear-gradient(135deg, #171717 0%, #090909 100%);
	box-shadow:
		0 26px 70px rgba(16, 16, 16, 0.16),
		0 18px 48px rgba(255, 90, 0, 0.10);
}

.yop-vs-security-showcase::before {
	content: "";
	position: absolute;
	top: -90px;
	right: -90px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(255, 90, 0, 0.18);
	pointer-events: none;
}

.yop-vs-security-showcase .yop-vs-heading-lg {
	color: var(--yop-vs-white);
}

.yop-vs-security-showcase .yop-vs-subline,
.yop-vs-security-showcase .yop-vs-subline p {
	color: rgba(255, 255, 255, 0.72);
}

.yop-vs-security-showcase-copy {
	position: relative;
	z-index: 2;
}

.yop-vs-security-showcase-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 20px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.yop-vs-security-showcase-list li {
	position: relative;
	padding-left: 26px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 13px;
	font-weight: 760;
	line-height: 1.35;
}

.yop-vs-security-showcase-list li::before {
	content: "✓";
	position: absolute;
	top: 0;
	left: 0;
	color: var(--yop-vs-orange);
	font-weight: 950;
}

.yop-vs-security-showcase-panel {
	position: relative;
	z-index: 2;
	padding: 26px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
}

.yop-vs-security-orbit {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 260px;
	height: 260px;
	margin: 0 auto 24px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 50%;
	background:
		radial-gradient(circle at center, rgba(255, 90, 0, 0.24), transparent 0 32%, transparent 58%),
		rgba(255, 255, 255, 0.04);
}

.yop-vs-security-orbit::before,
.yop-vs-security-orbit::after {
	content: "";
	position: absolute;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 50%;
	pointer-events: none;
}

.yop-vs-security-orbit::before {
	inset: 34px;
}

.yop-vs-security-orbit::after {
	inset: 72px;
}

.yop-vs-security-lock {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	border-radius: 28px;
	background: var(--yop-vs-orange);
	box-shadow:
		0 20px 50px rgba(255, 90, 0, 0.30),
		inset 0 0 0 1px rgba(255, 255, 255, 0.16);
	font-size: 36px;
}

.yop-vs-security-dot {
	position: absolute;
	width: 14px;
	height: 14px;
	border: 3px solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	background: var(--yop-vs-orange);
	box-shadow: 0 0 0 8px rgba(255, 90, 0, 0.15);
}

.yop-vs-security-dot.dot-1 {
	top: 28px;
	left: 72px;
}

.yop-vs-security-dot.dot-2 {
	top: 78px;
	right: 30px;
}

.yop-vs-security-dot.dot-3 {
	right: 78px;
	bottom: 26px;
}

.yop-vs-security-dot.dot-4 {
	bottom: 84px;
	left: 28px;
}

.yop-vs-security-mini-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.yop-vs-security-mini-card {
	padding: 16px;
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06);
}

.yop-vs-security-mini-card strong {
	display: block;
	margin-bottom: 5px;
	color: var(--yop-vs-white);
	font-size: 13px;
	font-weight: 900;
}

.yop-vs-security-mini-card span {
	display: block;
	color: rgba(255, 255, 255, 0.66);
	font-size: 12px;
	font-weight: 700;
}

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

	.yop-vs-pricing-hero-card.is-highlight {
		transform: none;
	}

	.yop-vs-pricing-hero-card.is-highlight:hover {
		transform: translateY(-4px);
	}

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

@media (max-width: 767px) {
	.yop-vs-pricing-hero-card,
	.yop-vs-security-showcase,
	.yop-vs-security-showcase-panel {
		padding: 24px;
		border-radius: 22px;
	}

	.yop-vs-pricing-hero-price {
		font-size: 34px;
	}

	.yop-vs-security-showcase-list {
		grid-template-columns: 1fr;
	}

	.yop-vs-security-orbit {
		width: 220px;
		height: 220px;
	}

	.yop-vs-security-lock {
		width: 76px;
		height: 76px;
		border-radius: 24px;
		font-size: 30px;
	}

	.yop-vs-security-mini-grid {
		grid-template-columns: 1fr;
	}
}
/* YOP_VS_HOME_STEP_6_END */

/* YOP_VS_HOME_STEP_7_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "target_groups_showcase_section",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "marketing_target_groups_styles",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.7",
  "last_updated": "2026-06-17",
  "last_change": "Vereinsarten-/Zielgruppenbereich hochwertig ausgebaut und kompakte Dopplung von Paketen/Sicherheit entfernt.",
  "area": "asset",
  "review_note": "Reine Design-Erweiterung ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 7: Vereinsarten / Zielgruppen
   ========================================================== */

.yop-vs-home-targets {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 5% 22%, rgba(255, 90, 0, 0.10), transparent 0 20%, transparent 42%),
		radial-gradient(circle at 96% 66%, rgba(255, 90, 0, 0.10), transparent 0 18%, transparent 46%),
		linear-gradient(180deg, #fbfbfb 0%, #ffffff 52%, #fbfbfb 100%);
}

.yop-vs-home-targets::before {
	content: "";
	position: absolute;
	top: 110px;
	left: 0;
	width: 140px;
	height: 240px;
	background-image: radial-gradient(rgba(255, 90, 0, 0.42) 1.2px, transparent 1.2px);
	background-size: 18px 18px;
	opacity: 0.38;
	pointer-events: none;
}

.yop-vs-target-layout {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

.yop-vs-target-feature-card {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 28px;
	align-items: center;
	min-height: 440px;
	padding: 36px;
	border: 1px solid rgba(255, 90, 0, 0.24);
	border-radius: 30px;
	background:
		radial-gradient(circle at 88% 20%, rgba(255, 90, 0, 0.18), transparent 0 22%, transparent 50%),
		linear-gradient(180deg, #ffffff 0%, #fff8f3 100%);
	box-shadow:
		0 24px 62px rgba(255, 90, 0, 0.12),
		0 14px 36px rgba(16, 16, 16, 0.06);
}

.yop-vs-target-feature-card::after {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -100px;
	width: 260px;
	height: 260px;
	border-radius: 50%;
	background: rgba(255, 90, 0, 0.12);
	pointer-events: none;
}

.yop-vs-target-feature-content {
	position: relative;
	z-index: 2;
}

.yop-vs-target-feature-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 18px;
	border-radius: 22px;
	color: var(--yop-vs-orange);
	background: var(--yop-vs-white);
	box-shadow:
		0 14px 34px rgba(255, 90, 0, 0.16),
		inset 0 0 0 1px rgba(255, 90, 0, 0.14);
	font-size: 28px;
	font-weight: 950;
}

.yop-vs-target-label {
	display: block;
	margin-bottom: 12px;
	color: var(--yop-vs-orange);
	font-size: var(--yop-vs-font-badge);
	font-weight: 950;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.yop-vs-target-feature-card h3 {
	margin: 0;
	color: var(--yop-vs-black);
	font-size: clamp(26px, 3vw, 40px);
	font-weight: 950;
	line-height: 1.06;
	letter-spacing: -0.055em;
}

.yop-vs-target-feature-card p {
	max-width: 560px;
	margin: 18px 0 0;
	color: var(--yop-vs-muted);
	font-size: 14px;
	line-height: 1.62;
}

.yop-vs-target-feature-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 24px;
}

.yop-vs-target-feature-list span {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 8px 12px;
	border: 1px solid rgba(255, 90, 0, 0.18);
	border-radius: 999px;
	color: var(--yop-vs-orange);
	background: rgba(255, 255, 255, 0.72);
	font-size: 12px;
	font-weight: 850;
	line-height: 1;
}

.yop-vs-target-mini-dashboard {
	position: relative;
	z-index: 2;
	padding: 20px;
	border: 1px solid rgba(255, 90, 0, 0.16);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.78);
	box-shadow: 0 18px 44px rgba(16, 16, 16, 0.07);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
}

.yop-vs-target-mini-header {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--yop-vs-border);
}

.yop-vs-target-mini-header span,
.yop-vs-target-mini-row span {
	color: var(--yop-vs-muted);
	font-size: 12px;
	font-weight: 760;
}

.yop-vs-target-mini-header strong {
	padding: 5px 9px;
	border-radius: 999px;
	color: var(--yop-vs-white);
	background: var(--yop-vs-orange);
	font-size: 10.5px;
	font-weight: 950;
	line-height: 1;
}

.yop-vs-target-mini-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid rgba(233, 233, 233, 0.72);
}

.yop-vs-target-mini-row:last-child {
	border-bottom: 0;
}

.yop-vs-target-mini-row strong {
	color: var(--yop-vs-black);
	font-size: 18px;
	font-weight: 950;
	letter-spacing: -0.035em;
}

.yop-vs-target-card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.yop-vs-target-card {
	position: relative;
	overflow: hidden;
	min-height: 210px;
	padding: 24px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 24px;
	background:
		linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
	box-shadow: var(--yop-vs-shadow-card);
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.yop-vs-target-card::after {
	content: "";
	position: absolute;
	right: -42px;
	bottom: -48px;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: rgba(255, 90, 0, 0.075);
	pointer-events: none;
}

.yop-vs-target-card:hover {
	border-color: rgba(255, 90, 0, 0.32);
	box-shadow: 0 18px 44px rgba(16, 16, 16, 0.10);
	transform: translateY(-3px);
}

.yop-vs-target-card-icon {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 18px;
	border-radius: 16px;
	color: var(--yop-vs-orange);
	background: var(--yop-vs-orange-soft);
	box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.12);
	font-size: 21px;
	font-weight: 950;
}

.yop-vs-target-card h3 {
	position: relative;
	z-index: 2;
	margin: 0 0 10px;
	color: var(--yop-vs-black);
	font-size: 18px;
	font-weight: 950;
	line-height: 1.18;
	letter-spacing: -0.035em;
}

.yop-vs-target-card p {
	position: relative;
	z-index: 2;
	margin: 0;
	color: var(--yop-vs-muted);
	font-size: 13px;
	line-height: 1.55;
}

.yop-vs-target-bottom {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 24px;
}

.yop-vs-target-bottom > div {
	padding: 22px;
	border: 1px solid var(--yop-vs-border);
	border-radius: 20px;
	background: var(--yop-vs-white);
	box-shadow: 0 10px 26px rgba(16, 16, 16, 0.045);
}

.yop-vs-target-bottom strong {
	display: block;
	margin-bottom: 6px;
	color: var(--yop-vs-black);
	font-size: 15px;
	font-weight: 950;
	line-height: 1.2;
}

.yop-vs-target-bottom span {
	display: block;
	color: var(--yop-vs-muted);
	font-size: 13px;
	line-height: 1.45;
}

/* Kompakte alte Dreierkarten nach Step 7 optisch neutralisieren, falls alte Inhalte gecacht sind. */
.yop-vs-home-grid-3 .yop-vs-home-pricing-card,
.yop-vs-home-grid-3 .yop-vs-home-security-card {
	display: none;
}

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

@media (max-width: 1200px) {
	.yop-vs-target-layout {
		grid-template-columns: 1fr;
	}

	.yop-vs-target-feature-card {
		grid-template-columns: minmax(0, 1fr) 260px;
	}
}

@media (max-width: 860px) {
	.yop-vs-target-feature-card {
		grid-template-columns: 1fr;
	}

	.yop-vs-target-mini-dashboard {
		max-width: 360px;
	}

	.yop-vs-target-card-grid,
	.yop-vs-target-bottom {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.yop-vs-target-feature-card,
	.yop-vs-target-card,
	.yop-vs-target-bottom > div {
		border-radius: 22px;
	}

	.yop-vs-target-feature-card {
		min-height: auto;
		padding: 26px;
	}

	.yop-vs-target-card {
		min-height: auto;
		padding: 22px;
	}
}
/* YOP_VS_HOME_STEP_7_END */

/* YOP_VS_HOME_STEP_8_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "trust_statistics_final_cta_section",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "marketing_trust_final_cta_styles",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.8",
  "last_updated": "2026-06-17",
  "last_change": "Statistik-/Trustbereich und Abschluss-CTA hochwertig finalisiert.",
  "area": "asset",
  "review_note": "Reine Design-Erweiterung ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 8: Trust / Statistik / Final CTA
   ========================================================== */

.yop-vs-home-trust {
        position: relative;
        overflow: hidden;
        background:
                radial-gradient(circle at 12% 20%, rgba(255, 90, 0, 0.12), transparent 0 18%, transparent 44%),
                radial-gradient(circle at 88% 78%, rgba(255, 90, 0, 0.10), transparent 0 18%, transparent 46%),
                linear-gradient(180deg, #fbfbfb 0%, #ffffff 100%);
}

.yop-vs-home-trust::before {
        content: "";
        position: absolute;
        top: 86px;
        right: 0;
        width: 140px;
        height: 260px;
        background-image: radial-gradient(rgba(255, 90, 0, 0.42) 1.2px, transparent 1.2px);
        background-size: 18px 18px;
        opacity: 0.35;
        pointer-events: none;
}

.yop-vs-trust-panel {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
        gap: 36px;
        align-items: center;
        padding: 38px;
        border: 1px solid var(--yop-vs-border);
        border-radius: 30px;
        background:
                radial-gradient(circle at 92% 12%, rgba(255, 90, 0, 0.14), transparent 0 20%, transparent 44%),
                linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
        box-shadow: var(--yop-vs-shadow-card);
}

.yop-vs-trust-copy .yop-vs-heading-lg {
        max-width: 650px;
}

.yop-vs-trust-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
}

.yop-vs-trust-stat-card {
        position: relative;
        overflow: hidden;
        min-height: 154px;
        padding: 24px;
        border: 1px solid var(--yop-vs-border);
        border-radius: 22px;
        background: var(--yop-vs-white);
        box-shadow: 0 12px 28px rgba(16, 16, 16, 0.045);
}

.yop-vs-trust-stat-card::after {
        content: "";
        position: absolute;
        right: -38px;
        bottom: -42px;
        width: 118px;
        height: 118px;
        border-radius: 50%;
        background: rgba(255, 90, 0, 0.08);
        pointer-events: none;
}

.yop-vs-trust-stat-icon {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        margin-bottom: 18px;
        border-radius: 15px;
        color: var(--yop-vs-orange);
        background: var(--yop-vs-orange-soft);
        box-shadow: inset 0 0 0 1px rgba(255, 90, 0, 0.12);
        font-size: 18px;
        font-weight: 950;
}

.yop-vs-trust-stat-card strong {
        position: relative;
        z-index: 2;
        display: block;
        color: var(--yop-vs-orange);
        font-size: 30px;
        font-weight: 950;
        line-height: 1;
        letter-spacing: -0.05em;
}

.yop-vs-trust-stat-card span:last-child {
        position: relative;
        z-index: 2;
        display: block;
        margin-top: 8px;
        color: var(--yop-vs-muted);
        font-size: 12.5px;
        font-weight: 760;
        line-height: 1.35;
}

.yop-vs-trust-reasons {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-top: 22px;
}

.yop-vs-trust-reason-card {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 24px;
        border: 1px solid var(--yop-vs-border);
        border-radius: 22px;
        background: var(--yop-vs-white);
        box-shadow: 0 12px 28px rgba(16, 16, 16, 0.045);
}

.yop-vs-trust-reason-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 48px;
        width: 48px;
        height: 48px;
        border-radius: 17px;
        color: var(--yop-vs-orange);
        background: var(--yop-vs-orange-soft);
        font-size: 21px;
        font-weight: 950;
}

.yop-vs-trust-reason-card h3 {
        margin: 0 0 7px;
        color: var(--yop-vs-black);
        font-size: 16px;
        font-weight: 950;
        line-height: 1.2;
        letter-spacing: -0.03em;
}

.yop-vs-trust-reason-card p {
        margin: 0;
        color: var(--yop-vs-muted);
        font-size: 13px;
        line-height: 1.5;
}

/* ==========================================================
   Final CTA
   ========================================================== */

.yop-vs-home-final {
        position: relative;
        overflow: hidden;
        padding-top: 42px;
        background:
                linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%);
}

.yop-vs-final-cta {
        position: relative;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 34px;
        align-items: center;
        padding: 42px;
        border-radius: 34px;
        background:
                radial-gradient(circle at 86% 14%, rgba(255, 255, 255, 0.20), transparent 0 22%, transparent 48%),
                linear-gradient(135deg, #101010 0%, #1a1a1a 54%, #ff5a00 140%);
        box-shadow: 0 28px 70px rgba(16, 16, 16, 0.20);
}

.yop-vs-final-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
        background-size: 20px 20px;
        opacity: 0.16;
        pointer-events: none;
}

.yop-vs-final-cta::after {
        content: "";
        position: absolute;
        right: -90px;
        bottom: -120px;
        width: 310px;
        height: 310px;
        border-radius: 50%;
        background: rgba(255, 90, 0, 0.45);
        filter: blur(1px);
        pointer-events: none;
}

.yop-vs-final-cta-content {
        position: relative;
        z-index: 2;
        max-width: 760px;
}

.yop-vs-final-cta .yop-vs-eyebrow {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.yop-vs-final-cta h2 {
        margin: 14px 0 14px;
        color: #ffffff;
        font-size: clamp(31px, 4vw, 54px);
        font-weight: 950;
        line-height: 0.98;
        letter-spacing: -0.065em;
}

.yop-vs-final-cta p {
        max-width: 690px;
        margin: 0;
        color: rgba(255, 255, 255, 0.78);
        font-size: 16px;
        line-height: 1.75;
}

.yop-vs-final-cta-checks {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
}

.yop-vs-final-cta-checks span {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 8px 13px;
        border-radius: 999px;
        color: #ffffff;
        background: rgba(255, 255, 255, 0.10);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
        font-size: 12px;
        font-weight: 850;
}

.yop-vs-final-cta-actions {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 220px;
}

.yop-vs-final-cta-actions .yop-vs-btn-primary,
.yop-vs-final-cta-actions .yop-vs-btn-secondary {
        justify-content: center;
        width: 100%;
}

.yop-vs-final-cta-actions .yop-vs-btn-secondary {
        color: #ffffff;
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.18);
}

.yop-vs-final-cta-actions .yop-vs-btn-secondary:hover,
.yop-vs-final-cta-actions .yop-vs-btn-secondary:focus-visible {
        color: var(--yop-vs-black);
        background: #ffffff;
        border-color: #ffffff;
}

/* ==========================================================
   Responsive Step 8
   ========================================================== */

@media (max-width: 1024px) {
        .yop-vs-trust-panel {
                grid-template-columns: 1fr;
                padding: 30px;
        }

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

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

        .yop-vs-final-cta-actions {
                flex-direction: row;
                min-width: 0;
        }
}

@media (max-width: 767px) {
        .yop-vs-home-trust::before {
                display: none;
        }

        .yop-vs-trust-panel {
                padding: 22px;
                border-radius: 24px;
        }

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

        .yop-vs-trust-stat-card {
                min-height: 132px;
                padding: 20px;
        }

        .yop-vs-trust-reason-card {
                padding: 20px;
                border-radius: 20px;
        }

        .yop-vs-final-cta {
                padding: 28px 22px;
                border-radius: 26px;
        }

        .yop-vs-final-cta h2 {
                letter-spacing: -0.055em;
        }

        .yop-vs-final-cta-actions {
                flex-direction: column;
        }

        .yop-vs-final-cta-checks {
                flex-direction: column;
                align-items: flex-start;
        }
}
/* YOP_VS_HOME_STEP_8_END */

/* YOP_VS_HOME_STEP_9_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "homepage_visual_polish_hover_animation_responsive_finalization",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "homepage_micro_interactions_responsive_polish_styles",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.9",
  "last_updated": "2026-06-17",
  "last_change": "Startseiten-Feinschliff mit Hover-Effekten, Animationen, Fokuszuständen und responsiver Politur ergänzt.",
  "area": "asset",
  "review_note": "Reine Design-Erweiterung im update-sicheren Child-Theme. Keine App-Logik, keine Datenbankabfragen, keine Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 9: Globale Startseiten-Politur
   ========================================================== */

html {
        scroll-behavior: smooth;
}

body {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

::selection {
        color: #ffffff;
        background: var(--yop-vs-orange);
}

.yop-vs-section,
.yop-vs-section-small,
.yop-vs-home-trust,
.yop-vs-home-final {
        isolation: isolate;
}

.yop-vs-container {
        position: relative;
}

/* ==========================================================
   Fokuszustände / Accessibility
   ========================================================== */

.yop-vs-btn-primary:focus-visible,
.yop-vs-btn-secondary:focus-visible,
.yop-vs-nav-link:focus-visible,
.yop-vs-header a:focus-visible,
.yop-vs-footer a:focus-visible,
.yop-vs-final-cta a:focus-visible {
        outline: 3px solid rgba(255, 90, 0, 0.42);
        outline-offset: 4px;
}

/* ==========================================================
   Hochwertige Hover-Effekte
   ========================================================== */

.yop-vs-btn-primary,
.yop-vs-btn-secondary,
.yop-vs-nav-link,
.yop-vs-feature-card,
.yop-vs-module-card,
.yop-vs-process-step,
.yop-vs-trust-stat-card,
.yop-vs-trust-reason-card {
        transition:
                transform 180ms ease,
                box-shadow 180ms ease,
                border-color 180ms ease,
                background-color 180ms ease,
                color 180ms ease,
                opacity 180ms ease;
}

.yop-vs-btn-primary:hover,
.yop-vs-btn-primary:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(255, 90, 0, 0.28);
}

.yop-vs-btn-secondary:hover,
.yop-vs-btn-secondary:focus-visible {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(16, 16, 16, 0.08);
}

.yop-vs-nav-link:hover,
.yop-vs-nav-link:focus-visible {
        color: var(--yop-vs-orange);
}

.yop-vs-feature-card:hover,
.yop-vs-module-card:hover,
.yop-vs-process-step:hover,
.yop-vs-trust-stat-card:hover,
.yop-vs-trust-reason-card:hover {
        transform: translateY(-5px);
        border-color: rgba(255, 90, 0, 0.22);
        box-shadow: 0 22px 46px rgba(16, 16, 16, 0.085);
}

.yop-vs-trust-stat-card:hover .yop-vs-trust-stat-icon,
.yop-vs-trust-reason-card:hover .yop-vs-trust-reason-icon {
        transform: scale(1.04);
}

.yop-vs-trust-stat-icon,
.yop-vs-trust-reason-icon {
        transition: transform 180ms ease;
}

/* ==========================================================
   Hero- und Karten-Tiefenwirkung
   ========================================================== */

.yop-vs-hero,
.yop-vs-home-trust,
.yop-vs-home-final {
        transform: translateZ(0);
}

.yop-vs-hero-visual,
.yop-vs-dashboard-card,
.yop-vs-trust-panel,
.yop-vs-final-cta {
        backface-visibility: hidden;
}

.yop-vs-hero-visual::after,
.yop-vs-dashboard-card::after {
        pointer-events: none;
}

.yop-vs-module-card,
.yop-vs-feature-card,
.yop-vs-process-step,
.yop-vs-trust-stat-card,
.yop-vs-trust-reason-card {
        will-change: transform;
}

/* ==========================================================
   Animationen ohne JavaScript
   ========================================================== */

@keyframes yopVsFadeUp {
        from {
                opacity: 0;
                transform: translateY(18px);
        }

        to {
                opacity: 1;
                transform: translateY(0);
        }
}

@keyframes yopVsSoftFloat {
        0% {
                transform: translateY(0);
        }

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

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

@media (prefers-reduced-motion: no-preference) {
        .yop-vs-hero-copy,
        .yop-vs-hero-visual,
        .yop-vs-section-header,
        .yop-vs-feature-card,
        .yop-vs-module-card,
        .yop-vs-process-step,
        .yop-vs-trust-panel,
        .yop-vs-trust-reason-card,
        .yop-vs-final-cta {
                animation-name: yopVsFadeUp;
                animation-duration: 620ms;
                animation-timing-function: ease;
                animation-fill-mode: both;
        }

        .yop-vs-feature-card:nth-child(2),
        .yop-vs-module-card:nth-child(2),
        .yop-vs-process-step:nth-child(2),
        .yop-vs-trust-reason-card:nth-child(2) {
                animation-delay: 80ms;
        }

        .yop-vs-feature-card:nth-child(3),
        .yop-vs-module-card:nth-child(3),
        .yop-vs-process-step:nth-child(3),
        .yop-vs-trust-reason-card:nth-child(3) {
                animation-delay: 140ms;
        }

        .yop-vs-feature-card:nth-child(4),
        .yop-vs-module-card:nth-child(4) {
                animation-delay: 200ms;
        }

        .yop-vs-hero-badge,
        .yop-vs-dashboard-floating-card,
        .yop-vs-hero-floating-card {
                animation: yopVsSoftFloat 5.5s ease-in-out infinite;
        }
}

@media (prefers-reduced-motion: reduce) {
        html {
                scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
        }
}

/* ==========================================================
   Elementor-/Theme-Feinschliff
   ========================================================== */

.elementor-widget-html .yop-vs-section:first-child {
        margin-top: 0;
}

.elementor-widget-html .yop-vs-section:last-child {
        margin-bottom: 0;
}

.elementor-widget-html .yop-vs-btn-primary,
.elementor-widget-html .yop-vs-btn-secondary {
        text-decoration: none;
}

.elementor-widget-html .yop-vs-btn-primary:hover,
.elementor-widget-html .yop-vs-btn-secondary:hover {
        text-decoration: none;
}

/* ==========================================================
   Responsive Finalisierung
   ========================================================== */

@media (max-width: 1180px) {
        .yop-vs-container {
                width: min(100% - 42px, var(--yop-vs-container));
        }

        .yop-vs-hero {
                gap: 42px;
        }
}

@media (max-width: 1024px) {
        .yop-vs-section {
                padding-top: 78px;
                padding-bottom: 78px;
        }

        .yop-vs-section-small {
                padding-top: 52px;
                padding-bottom: 52px;
        }

        .yop-vs-feature-card:hover,
        .yop-vs-module-card:hover,
        .yop-vs-process-step:hover,
        .yop-vs-trust-stat-card:hover,
        .yop-vs-trust-reason-card:hover {
                transform: none;
        }
}

@media (max-width: 767px) {
        .yop-vs-container {
                width: min(100% - 28px, var(--yop-vs-container));
        }

        .yop-vs-section {
                padding-top: 62px;
                padding-bottom: 62px;
        }

        .yop-vs-section-small {
                padding-top: 42px;
                padding-bottom: 42px;
        }

        .yop-vs-heading-lg,
        .yop-vs-section-header h2,
        .yop-vs-final-cta h2 {
                hyphens: auto;
        }

        .yop-vs-btn-primary,
        .yop-vs-btn-secondary {
                width: 100%;
                justify-content: center;
                text-align: center;
        }

        .yop-vs-hero-actions,
        .yop-vs-final-cta-actions {
                width: 100%;
        }

        .yop-vs-trust-panel,
        .yop-vs-final-cta {
                box-shadow: 0 18px 42px rgba(16, 16, 16, 0.10);
        }

        .yop-vs-trust-stat-card strong {
                font-size: 28px;
        }
}

@media (max-width: 480px) {
        .yop-vs-container {
                width: min(100% - 22px, var(--yop-vs-container));
        }

        .yop-vs-section {
                padding-top: 54px;
                padding-bottom: 54px;
        }

        .yop-vs-section-small {
                padding-top: 36px;
                padding-bottom: 36px;
        }

        .yop-vs-eyebrow {
                max-width: 100%;
                white-space: normal;
        }

        .yop-vs-trust-panel,
        .yop-vs-final-cta {
                border-radius: 22px;
        }

        .yop-vs-trust-reason-card {
                flex-direction: column;
        }

        .yop-vs-trust-reason-icon {
                flex-basis: auto;
        }
}
/* YOP_VS_HOME_STEP_9_END */

/* YOP_VS_THEME_STEP_11_HEADER_FOOTER_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_website_shell",
  "sub_feature": "header_footer_mobile_navigation_design",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "header_footer_mobile_navigation_styles",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.11",
  "last_updated": "2026-06-17",
  "last_change": "Header, Navigation, Mobile-Menü und Footer hochwertig gestaltet.",
  "area": "asset",
  "review_note": "Reine Theme-/Design-Erweiterung ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 11: Website Shell / Header
   ========================================================== */

.yop-vs-body {
        background: #ffffff;
}

.yop-vs-site-header {
        position: sticky;
        top: 0;
        z-index: 999;
        background: rgba(255, 255, 255, 0.88);
        border-bottom: 1px solid rgba(16, 16, 16, 0.06);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        transition:
                box-shadow 180ms ease,
                background-color 180ms ease,
                border-color 180ms ease;
}

.admin-bar .yop-vs-site-header {
        top: 32px;
}

.yop-vs-site-header.is-scrolled {
        background: rgba(255, 255, 255, 0.94);
        border-bottom-color: rgba(16, 16, 16, 0.08);
        box-shadow: 0 12px 32px rgba(16, 16, 16, 0.07);
}

.yop-vs-site-header__inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 24px;
        align-items: center;
        width: min(100% - 44px, var(--yop-vs-container, 1180px));
        min-height: 74px;
        margin: 0 auto;
}

.yop-vs-brand,
.yop-vs-footer-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--yop-vs-black, #101010);
        text-decoration: none;
}

.yop-vs-brand:hover,
.yop-vs-footer-brand:hover {
        color: var(--yop-vs-black, #101010);
        text-decoration: none;
}

.yop-vs-brand__mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
}

.yop-vs-brand__mark img,
.yop-vs-brand__mark .yvm-brand-mark {
        display: block;
        width: 32px;
        height: 32px;
        object-fit: contain;
}

.yop-vs-brand__text {
        color: var(--yop-vs-black, #101010);
        font-size: 21px;
        font-weight: 950;
        line-height: 1;
        letter-spacing: -0.06em;
}

.yop-vs-brand__text span {
        color: var(--yop-vs-orange, #ff5a00);
}

.yop-vs-main-nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
}

.yop-vs-nav-link {
        display: inline-flex;
        align-items: center;
        min-height: 38px;
        padding: 8px 12px;
        border-radius: 999px;
        color: var(--yop-vs-black, #101010);
        font-size: 13px;
        font-weight: 850;
        line-height: 1;
        text-decoration: none;
}

.yop-vs-nav-link:hover,
.yop-vs-nav-link:focus-visible {
        color: var(--yop-vs-orange, #ff5a00);
        background: rgba(255, 90, 0, 0.07);
        text-decoration: none;
}

.yop-vs-header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
}

.yop-vs-header-login,
.yop-vs-header-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 10px 17px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        text-decoration: none;
        transition:
                transform 180ms ease,
                box-shadow 180ms ease,
                background-color 180ms ease,
                color 180ms ease,
                border-color 180ms ease;
}

.yop-vs-header-login {
        color: var(--yop-vs-black, #101010);
        background: #ffffff;
        border: 1px solid rgba(16, 16, 16, 0.10);
}

.yop-vs-header-cta {
        color: #ffffff;
        background: var(--yop-vs-orange, #ff5a00);
        border: 1px solid var(--yop-vs-orange, #ff5a00);
        box-shadow: 0 12px 26px rgba(255, 90, 0, 0.22);
}

.yop-vs-header-login:hover,
.yop-vs-header-login:focus-visible,
.yop-vs-header-cta:hover,
.yop-vs-header-cta:focus-visible {
        transform: translateY(-2px);
        text-decoration: none;
}

.yop-vs-header-login:hover,
.yop-vs-header-login:focus-visible {
        color: var(--yop-vs-orange, #ff5a00);
        border-color: rgba(255, 90, 0, 0.24);
        box-shadow: 0 12px 26px rgba(16, 16, 16, 0.07);
}

.yop-vs-header-cta:hover,
.yop-vs-header-cta:focus-visible {
        color: #ffffff;
        box-shadow: 0 16px 34px rgba(255, 90, 0, 0.30);
}

.yop-vs-nav-toggle,
.yop-vs-nav-toggle-label {
        display: none;
}

.yop-vs-site-main {
        min-height: 50vh;
}

/* ==========================================================
   Step 11: Footer
   ========================================================== */

.yop-vs-site-footer {
        position: relative;
        overflow: hidden;
        margin-top: 0;
        color: rgba(255, 255, 255, 0.76);
        background:
                radial-gradient(circle at 86% 16%, rgba(255, 90, 0, 0.18), transparent 0 18%, transparent 42%),
                linear-gradient(135deg, #101010 0%, #181818 56%, #101010 100%);
}

.yop-vs-site-footer::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
        background-size: 20px 20px;
        opacity: 0.09;
        pointer-events: none;
}

.yop-vs-site-footer__inner {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 58px;
        width: min(100% - 44px, var(--yop-vs-container, 1180px));
        margin: 0 auto;
        padding: 64px 0 46px;
}

.yop-vs-site-footer__brand p {
        max-width: 430px;
        margin: 20px 0 0;
        color: rgba(255, 255, 255, 0.66);
        font-size: 14px;
        line-height: 1.75;
}

.yop-vs-site-footer .yop-vs-brand__text {
        color: #ffffff;
}

.yop-vs-site-footer__columns {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 28px;
}

.yop-vs-site-footer__column h2 {
        margin: 0 0 16px;
        color: #ffffff;
        font-size: 13px;
        font-weight: 950;
        letter-spacing: 0.08em;
        text-transform: uppercase;
}

.yop-vs-site-footer__column a {
        display: block;
        width: fit-content;
        margin: 0 0 11px;
        color: rgba(255, 255, 255, 0.66);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.35;
        text-decoration: none;
        transition:
                color 180ms ease,
                transform 180ms ease;
}

.yop-vs-site-footer__column a:hover,
.yop-vs-site-footer__column a:focus-visible {
        color: #ffffff;
        transform: translateX(3px);
        text-decoration: none;
}

.yop-vs-site-footer__bottom {
        position: relative;
        z-index: 2;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.yop-vs-site-footer__bottom-inner {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        width: min(100% - 44px, var(--yop-vs-container, 1180px));
        margin: 0 auto;
        padding: 20px 0;
        color: rgba(255, 255, 255, 0.50);
        font-size: 12px;
        font-weight: 700;
}

/* ==========================================================
   Step 11: Mobile Navigation
   ========================================================== */

@media (max-width: 1080px) {
        .yop-vs-site-header__inner {
                grid-template-columns: auto auto;
                justify-content: space-between;
        }

        .yop-vs-nav-toggle {
                position: absolute;
                width: 1px;
                height: 1px;
                opacity: 0;
                pointer-events: none;
        }

        .yop-vs-nav-toggle-label {
                display: inline-flex;
                flex-direction: column;
                justify-content: center;
                gap: 5px;
                width: 44px;
                height: 44px;
                border: 1px solid rgba(16, 16, 16, 0.10);
                border-radius: 14px;
                background: #ffffff;
                cursor: pointer;
        }

        .yop-vs-nav-toggle-label span {
                display: block;
                width: 18px;
                height: 2px;
                margin: 0 auto;
                border-radius: 999px;
                background: var(--yop-vs-black, #101010);
                transition:
                        transform 180ms ease,
                        opacity 180ms ease;
        }

        .yop-vs-nav-toggle:checked + .yop-vs-nav-toggle-label span:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
        }

        .yop-vs-nav-toggle:checked + .yop-vs-nav-toggle-label span:nth-child(2) {
                opacity: 0;
        }

        .yop-vs-nav-toggle:checked + .yop-vs-nav-toggle-label span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
        }

        .yop-vs-main-nav,
        .yop-vs-header-actions {
                position: absolute;
                left: 22px;
                right: 22px;
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
                max-height: 0;
                padding: 0;
                overflow: hidden;
                opacity: 0;
                pointer-events: none;
                background: #ffffff;
                transition:
                        max-height 220ms ease,
                        opacity 180ms ease,
                        padding 180ms ease;
        }

        .yop-vs-main-nav {
                top: calc(100% + 10px);
                border: 1px solid rgba(16, 16, 16, 0.08);
                border-radius: 22px 22px 14px 14px;
                box-shadow: 0 22px 46px rgba(16, 16, 16, 0.11);
        }

        .yop-vs-header-actions {
                top: calc(100% + 286px);
                border: 1px solid rgba(16, 16, 16, 0.08);
                border-radius: 14px 14px 22px 22px;
                box-shadow: 0 22px 46px rgba(16, 16, 16, 0.11);
        }

        .yop-vs-nav-toggle:checked ~ .yop-vs-main-nav {
                max-height: 280px;
                padding: 14px;
                opacity: 1;
                pointer-events: auto;
        }

        .yop-vs-nav-toggle:checked ~ .yop-vs-header-actions {
                max-height: 150px;
                padding: 14px;
                opacity: 1;
                pointer-events: auto;
        }

        .yop-vs-nav-link {
                justify-content: flex-start;
                min-height: 44px;
                padding: 12px 14px;
                border-radius: 14px;
                background: #fbfbfb;
        }

        .yop-vs-header-login,
        .yop-vs-header-cta {
                width: 100%;
                min-height: 46px;
        }
}

@media (max-width: 782px) {
        .admin-bar .yop-vs-site-header {
                top: 46px;
        }
}

@media (max-width: 767px) {
        .yop-vs-site-header__inner,
        .yop-vs-site-footer__inner,
        .yop-vs-site-footer__bottom-inner {
                width: min(100% - 28px, var(--yop-vs-container, 1180px));
        }

        .yop-vs-site-header__inner {
                min-height: 66px;
        }

        .yop-vs-brand__text {
                font-size: 20px;
        }

        .yop-vs-site-footer__inner {
                grid-template-columns: 1fr;
                gap: 36px;
                padding: 48px 0 34px;
        }

        .yop-vs-site-footer__columns {
                grid-template-columns: 1fr;
                gap: 24px;
        }

        .yop-vs-site-footer__bottom-inner {
                flex-direction: column;
                gap: 8px;
                padding: 18px 0;
        }
}

@media (max-width: 480px) {
        .yop-vs-site-header__inner,
        .yop-vs-site-footer__inner,
        .yop-vs-site-footer__bottom-inner {
                width: min(100% - 22px, var(--yop-vs-container, 1180px));
        }

        .yop-vs-main-nav,
        .yop-vs-header-actions {
                left: 11px;
                right: 11px;
        }

        .yop-vs-brand__text {
                font-size: 19px;
        }
}
/* YOP_VS_THEME_STEP_11_HEADER_FOOTER_END */

/* YOP_VS_THEME_STEP_12_HEADER_REPAIR_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_website_shell",
  "sub_feature": "header_duplicate_repair_and_layout_cleanup",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "header_layout_repair_styles",
  "class_name": "",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.12",
  "last_updated": "2026-06-17",
  "last_change": "Doppelten Elementor-Header ausgeblendet, Site-Header auf eindeutige Klassen umgestellt und Layout aufgeräumt.",
  "area": "asset",
  "review_note": "Reine Theme-/Design-Reparatur ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 12: alten Elementor-/Startseiten-Header ausblenden
   ========================================================== */

.yop-vs-site-main .yop-vs-header,
.yop-vs-site-main header.yop-vs-header,
.elementor-widget-html .yop-vs-header,
.elementor-widget-html header.yop-vs-header {
        display: none !important;
}

/* ==========================================================
   Step 12: sauberer Site Header
   ========================================================== */

.yop-vs-site-header {
        position: sticky;
        top: 0;
        z-index: 999;
        width: 100%;
        background: rgba(255, 255, 255, 0.92);
        border-bottom: 1px solid rgba(16, 16, 16, 0.07);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
}

.admin-bar .yop-vs-site-header {
        top: 32px;
}

.yop-vs-site-header.is-scrolled {
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 12px 32px rgba(16, 16, 16, 0.07);
}

.yop-vs-site-header__inner {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr) auto;
        gap: 24px;
        align-items: center;
        width: min(100% - 44px, var(--yop-vs-container, 1180px));
        min-height: 76px;
        margin: 0 auto;
}

.yop-vs-site-brand,
.yop-vs-site-footer-brand {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: fit-content;
        color: var(--yop-vs-black, #101010);
        text-decoration: none;
}

.yop-vs-site-brand:hover,
.yop-vs-site-brand:focus-visible,
.yop-vs-site-footer-brand:hover,
.yop-vs-site-footer-brand:focus-visible {
        color: var(--yop-vs-black, #101010);
        text-decoration: none;
}

.yop-vs-site-brand__mark {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
}

.yop-vs-site-brand__mark-img,
.yop-vs-site-brand__mark .yvm-brand-mark {
        display: block;
        width: 32px;
        height: 32px;
        object-fit: contain;
}

.yop-vs-site-brand__text {
        display: inline-flex;
        align-items: baseline;
        color: var(--yop-vs-black, #101010);
        font-size: 24px;
        font-weight: 950;
        line-height: 1;
        letter-spacing: -0.07em;
        white-space: nowrap;
}

.yop-vs-site-brand__text span {
        color: var(--yop-vs-orange, #ff5a00);
}

.yop-vs-site-main-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 0;
}

.yop-vs-site-nav-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 8px 12px;
        border-radius: 999px;
        color: var(--yop-vs-black, #101010);
        font-size: 13px;
        font-weight: 850;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
        transition:
                color 180ms ease,
                background-color 180ms ease,
                transform 180ms ease;
}

.yop-vs-site-nav-link:hover,
.yop-vs-site-nav-link:focus-visible {
        color: var(--yop-vs-orange, #ff5a00);
        background: rgba(255, 90, 0, 0.07);
        text-decoration: none;
}

.yop-vs-site-header-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        white-space: nowrap;
}

.yop-vs-site-header-login,
.yop-vs-site-header-cta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 10px 17px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 900;
        line-height: 1;
        text-decoration: none;
        transition:
                transform 180ms ease,
                box-shadow 180ms ease,
                background-color 180ms ease,
                color 180ms ease,
                border-color 180ms ease;
}

.yop-vs-site-header-login {
        color: var(--yop-vs-black, #101010);
        background: #ffffff;
        border: 1px solid rgba(16, 16, 16, 0.12);
}

.yop-vs-site-header-cta {
        color: #ffffff;
        background: var(--yop-vs-orange, #ff5a00);
        border: 1px solid var(--yop-vs-orange, #ff5a00);
        box-shadow: 0 12px 26px rgba(255, 90, 0, 0.22);
}

.yop-vs-site-header-login:hover,
.yop-vs-site-header-login:focus-visible,
.yop-vs-site-header-cta:hover,
.yop-vs-site-header-cta:focus-visible {
        transform: translateY(-2px);
        text-decoration: none;
}

.yop-vs-site-header-login:hover,
.yop-vs-site-header-login:focus-visible {
        color: var(--yop-vs-orange, #ff5a00);
        border-color: rgba(255, 90, 0, 0.24);
        box-shadow: 0 12px 26px rgba(16, 16, 16, 0.07);
}

.yop-vs-site-header-cta:hover,
.yop-vs-site-header-cta:focus-visible {
        color: #ffffff;
        box-shadow: 0 16px 34px rgba(255, 90, 0, 0.30);
}

.yop-vs-site-nav-toggle,
.yop-vs-site-nav-toggle-label {
        display: none;
}

/* Hero-Abstand nach repariertem Header sauber reduzieren */
.yop-vs-site-main .yop-vs-hero,
.elementor-widget-html .yop-vs-hero {
        padding-top: 86px;
}

/* ==========================================================
   Step 12: Footer Brand reparieren
   ========================================================== */

.yop-vs-site-footer .yop-vs-site-brand__text {
        color: #ffffff;
}

.yop-vs-site-footer .yop-vs-site-brand__text span {
        color: var(--yop-vs-orange, #ff5a00);
}

/* ==========================================================
   Step 12: Mobile Header
   ========================================================== */

@media (max-width: 1120px) {
        .yop-vs-site-header__inner {
                grid-template-columns: auto auto;
                justify-content: space-between;
                min-height: 70px;
        }

        .yop-vs-site-nav-toggle {
                position: absolute;
                width: 1px;
                height: 1px;
                opacity: 0;
                pointer-events: none;
        }

        .yop-vs-site-nav-toggle-label {
                display: inline-flex;
                flex-direction: column;
                justify-content: center;
                gap: 5px;
                width: 44px;
                height: 44px;
                border: 1px solid rgba(16, 16, 16, 0.10);
                border-radius: 14px;
                background: #ffffff;
                cursor: pointer;
        }

        .yop-vs-site-nav-toggle-label span {
                display: block;
                width: 18px;
                height: 2px;
                margin: 0 auto;
                border-radius: 999px;
                background: var(--yop-vs-black, #101010);
                transition:
                        transform 180ms ease,
                        opacity 180ms ease;
        }

        .yop-vs-site-nav-toggle:checked + .yop-vs-site-nav-toggle-label span:nth-child(1) {
                transform: translateY(7px) rotate(45deg);
        }

        .yop-vs-site-nav-toggle:checked + .yop-vs-site-nav-toggle-label span:nth-child(2) {
                opacity: 0;
        }

        .yop-vs-site-nav-toggle:checked + .yop-vs-site-nav-toggle-label span:nth-child(3) {
                transform: translateY(-7px) rotate(-45deg);
        }

        .yop-vs-site-main-nav,
        .yop-vs-site-header-actions {
                position: absolute;
                left: 22px;
                right: 22px;
                display: grid;
                grid-template-columns: 1fr;
                gap: 8px;
                max-height: 0;
                padding: 0;
                overflow: hidden;
                opacity: 0;
                pointer-events: none;
                background: #ffffff;
                transition:
                        max-height 220ms ease,
                        opacity 180ms ease,
                        padding 180ms ease;
        }

        .yop-vs-site-main-nav {
                top: calc(100% + 10px);
                border: 1px solid rgba(16, 16, 16, 0.08);
                border-radius: 22px 22px 14px 14px;
                box-shadow: 0 22px 46px rgba(16, 16, 16, 0.11);
        }

        .yop-vs-site-header-actions {
                top: calc(100% + 286px);
                border: 1px solid rgba(16, 16, 16, 0.08);
                border-radius: 14px 14px 22px 22px;
                box-shadow: 0 22px 46px rgba(16, 16, 16, 0.11);
        }

        .yop-vs-site-nav-toggle:checked ~ .yop-vs-site-main-nav {
                max-height: 280px;
                padding: 14px;
                opacity: 1;
                pointer-events: auto;
        }

        .yop-vs-site-nav-toggle:checked ~ .yop-vs-site-header-actions {
                max-height: 150px;
                padding: 14px;
                opacity: 1;
                pointer-events: auto;
        }

        .yop-vs-site-nav-link {
                justify-content: flex-start;
                min-height: 44px;
                padding: 12px 14px;
                border-radius: 14px;
                background: #fbfbfb;
        }

        .yop-vs-site-header-login,
        .yop-vs-site-header-cta {
                width: 100%;
                min-height: 46px;
        }
}

@media (max-width: 782px) {
        .admin-bar .yop-vs-site-header {
                top: 46px;
        }
}

@media (max-width: 767px) {
        .yop-vs-site-header__inner {
                width: min(100% - 28px, var(--yop-vs-container, 1180px));
                min-height: 66px;
        }

        .yop-vs-site-brand__text {
                font-size: 21px;
        }

        .yop-vs-site-main .yop-vs-hero,
        .elementor-widget-html .yop-vs-hero {
                padding-top: 64px;
        }
}

@media (max-width: 480px) {
        .yop-vs-site-header__inner {
                width: min(100% - 22px, var(--yop-vs-container, 1180px));
        }

        .yop-vs-site-main-nav,
        .yop-vs-site-header-actions {
                left: 11px;
                right: 11px;
        }

        .yop-vs-site-brand__text {
                font-size: 20px;
        }
}
/* YOP_VS_THEME_STEP_12_HEADER_REPAIR_END */

/* YOP_VS_THEME_STEP_12_1_HOME_HEADER_REPAIR_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "elementor_home_header_layout_repair",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "elementor_home_header_repair_styles",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.12.1",
  "last_updated": "2026-06-17",
  "last_change": "Bestehenden Elementor-Header .yop-vs-home-header repariert und durch WordPress eingefügte br/p-Störungen neutralisiert.",
  "area": "asset",
  "review_note": "Reine CSS-Reparatur ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 12.1: Elementor Home Header reparieren
   ========================================================== */

/* Legacy: alter eingebetteter Elementor-Header im Seiteninhalt.
   Der zentrale Theme-Header aus header.php bleibt auf allen Seiten sichtbar. */
.yop-vs-home-header {
        position: sticky;
        top: 32px;
        z-index: 999;
        width: 100%;
        background: rgba(255, 255, 255, 0.94);
        border-bottom: 1px solid rgba(16, 16, 16, 0.07);
        box-shadow: 0 10px 28px rgba(16, 16, 16, 0.045);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
}

/* Von WordPress/Elementor eingefügte Absätze und Umbrüche im Header neutralisieren */
.yop-vs-home-header p,
.yop-vs-home-header br {
        display: contents !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 0 !important;
        line-height: 0 !important;
}

/* Header-Innenlayout sauber einzeilig */
.yop-vs-home-header-inner {
        display: grid !important;
        grid-template-columns: 240px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 28px !important;
        width: min(100% - 44px, var(--yop-vs-container, 1180px)) !important;
        min-height: 78px !important;
        margin: 0 auto !important;
        padding: 0 !important;
}

/* Brand sauber links */
.yop-vs-home-brand {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 10px !important;
        width: fit-content !important;
        margin: 0 !important;
        padding: 0 !important;
        color: var(--yop-vs-black, #101010) !important;
        text-decoration: none !important;
        line-height: 1 !important;
}

.yop-vs-home-brand-icon {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        width: 13px !important;
        height: 13px !important;
        border-radius: 50% !important;
        background: var(--yop-vs-orange, #ff5a00) !important;
        box-shadow:
                0 0 0 6px rgba(255, 90, 0, 0.10),
                0 10px 26px rgba(255, 90, 0, 0.32) !important;
}

.yop-vs-home-brand-text {
        display: inline-flex !important;
        align-items: baseline !important;
        color: var(--yop-vs-black, #101010) !important;
        font-size: 24px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        letter-spacing: -0.07em !important;
        white-space: nowrap !important;
}

.yop-vs-home-brand-text span {
        color: var(--yop-vs-orange, #ff5a00) !important;
}

/* Navigation sauber mittig/rechts */
.yop-vs-home-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
}

.yop-vs-home-nav a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        color: var(--yop-vs-black, #101010) !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
        transition:
                color 180ms ease,
                background-color 180ms ease,
                transform 180ms ease !important;
}

.yop-vs-home-nav a:hover,
.yop-vs-home-nav a:focus-visible {
        color: var(--yop-vs-orange, #ff5a00) !important;
        background: rgba(255, 90, 0, 0.07) !important;
        text-decoration: none !important;
}

/* Header Buttons sauber rechts */
.yop-vs-home-header-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
}

.yop-vs-home-login,
.yop-vs-home-header-actions .yop-vs-btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 40px !important;
        padding: 10px 18px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-decoration: none !important;
        transition:
                transform 180ms ease,
                box-shadow 180ms ease,
                background-color 180ms ease,
                color 180ms ease,
                border-color 180ms ease !important;
}

.yop-vs-home-login {
        color: var(--yop-vs-black, #101010) !important;
        background: #ffffff !important;
        border: 1px solid rgba(16, 16, 16, 0.12) !important;
}

.yop-vs-home-header-actions .yop-vs-btn-primary {
        width: auto !important;
        color: #ffffff !important;
        background: var(--yop-vs-orange, #ff5a00) !important;
        border: 1px solid var(--yop-vs-orange, #ff5a00) !important;
        box-shadow: 0 12px 26px rgba(255, 90, 0, 0.22) !important;
}

.yop-vs-home-login:hover,
.yop-vs-home-login:focus-visible,
.yop-vs-home-header-actions .yop-vs-btn-primary:hover,
.yop-vs-home-header-actions .yop-vs-btn-primary:focus-visible {
        transform: translateY(-2px) !important;
        text-decoration: none !important;
}

.yop-vs-home-login:hover,
.yop-vs-home-login:focus-visible {
        color: var(--yop-vs-orange, #ff5a00) !important;
        border-color: rgba(255, 90, 0, 0.24) !important;
        box-shadow: 0 12px 26px rgba(16, 16, 16, 0.07) !important;
}

.yop-vs-home-header-actions .yop-vs-btn-primary:hover,
.yop-vs-home-header-actions .yop-vs-btn-primary:focus-visible {
        box-shadow: 0 16px 34px rgba(255, 90, 0, 0.30) !important;
}

/* Hero Abstand nach repariertem Header */
.yop-vs-hero {
        padding-top: 96px !important;
}

/* ==========================================================
   Tablet / Mobile Header
   ========================================================== */

@media (max-width: 1120px) {
        .yop-vs-home-header-inner {
                grid-template-columns: 1fr !important;
                gap: 16px !important;
                align-items: stretch !important;
                min-height: auto !important;
                padding: 18px 0 !important;
        }

        .yop-vs-home-brand {
                justify-self: center !important;
        }

        .yop-vs-home-nav {
                flex-wrap: wrap !important;
                justify-content: center !important;
        }

        .yop-vs-home-header-actions {
                justify-content: center !important;
        }

        .yop-vs-hero {
                padding-top: 70px !important;
        }
}

@media (max-width: 782px) {
        .yop-vs-home-header {
                top: 46px;
        }
}

@media (max-width: 767px) {
        .yop-vs-home-header-inner {
                width: min(100% - 28px, var(--yop-vs-container, 1180px)) !important;
                gap: 14px !important;
                padding: 16px 0 !important;
        }

        .yop-vs-home-brand-text {
                font-size: 22px !important;
        }

        .yop-vs-home-nav {
                display: none !important;
        }

        .yop-vs-home-header-actions {
                width: 100% !important;
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 10px !important;
        }

        .yop-vs-home-login,
        .yop-vs-home-header-actions .yop-vs-btn-primary {
                width: 100% !important;
        }

        .yop-vs-hero {
                padding-top: 54px !important;
        }
}

@media (max-width: 480px) {
        .yop-vs-home-header-inner {
                width: min(100% - 22px, var(--yop-vs-container, 1180px)) !important;
        }

        .yop-vs-home-brand-text {
                font-size: 21px !important;
        }

        .yop-vs-home-header-actions {
                grid-template-columns: 1fr !important;
        }
}
/* YOP_VS_THEME_STEP_12_1_HOME_HEADER_REPAIR_END */

/* YOP_VS_THEME_STEP_12_2_DB_HEADER_REPAIR_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "stored_elementor_header_minified_repair",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "stored_elementor_header_layout_styles",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.12.2",
  "last_updated": "2026-06-17",
  "last_change": "Gespeicherten Elementor-Header nach Datenbank-Reparatur einzeilig stabilisiert.",
  "area": "asset",
  "review_note": "Reine Design-/CSS-Reparatur ohne App-Logik, ohne Datenbankzugriff im CSS und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

.yop-vs-home-header {
        position: sticky !important;
        top: 32px !important;
        z-index: 999 !important;
        width: 100% !important;
        background: rgba(255, 255, 255, 0.96) !important;
        border-bottom: 1px solid rgba(16, 16, 16, 0.07) !important;
        box-shadow: 0 10px 28px rgba(16, 16, 16, 0.045) !important;
        backdrop-filter: blur(18px) !important;
        -webkit-backdrop-filter: blur(18px) !important;
}

.yop-vs-home-header *,
.yop-vs-home-header *::before,
.yop-vs-home-header *::after {
        box-sizing: border-box !important;
}

.yop-vs-home-header p,
.yop-vs-home-header br {
        display: none !important;
}

.yop-vs-home-header-inner {
        display: grid !important;
        grid-template-columns: 240px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 28px !important;
        width: min(100% - 44px, var(--yop-vs-container, 1180px)) !important;
        min-height: 76px !important;
        margin: 0 auto !important;
        padding: 0 !important;
}

.yop-vs-home-brand {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
        width: fit-content !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        color: var(--yop-vs-black, #101010) !important;
        text-decoration: none !important;
}

.yop-vs-home-brand-icon {
        display: inline-flex !important;
        flex: 0 0 13px !important;
        width: 13px !important;
        height: 13px !important;
        border-radius: 50% !important;
        background: var(--yop-vs-orange, #ff5a00) !important;
        box-shadow: 0 0 0 6px rgba(255, 90, 0, 0.10), 0 10px 26px rgba(255, 90, 0, 0.32) !important;
}

.yop-vs-home-brand-text {
        display: inline-flex !important;
        align-items: baseline !important;
        color: var(--yop-vs-black, #101010) !important;
        font-size: 24px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        letter-spacing: -0.07em !important;
        white-space: nowrap !important;
}

.yop-vs-home-brand-text span {
        color: var(--yop-vs-orange, #ff5a00) !important;
}

.yop-vs-home-nav {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
        margin: 0 !important;
        padding: 0 !important;
}

.yop-vs-home-nav a {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 38px !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        color: var(--yop-vs-black, #101010) !important;
        background: transparent !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        text-decoration: none !important;
}

.yop-vs-home-nav a:hover,
.yop-vs-home-nav a:focus-visible {
        color: var(--yop-vs-orange, #ff5a00) !important;
        background: rgba(255, 90, 0, 0.07) !important;
        text-decoration: none !important;
}

.yop-vs-home-header-actions {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
        white-space: nowrap !important;
}

.yop-vs-home-login,
.yop-vs-home-header-actions .yop-vs-btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
        min-height: 40px !important;
        padding: 10px 18px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        text-decoration: none !important;
}

.yop-vs-home-login {
        color: var(--yop-vs-black, #101010) !important;
        background: #ffffff !important;
        border: 1px solid rgba(16, 16, 16, 0.12) !important;
}

.yop-vs-home-header-actions .yop-vs-btn-primary {
        color: #ffffff !important;
        background: var(--yop-vs-orange, #ff5a00) !important;
        border: 1px solid var(--yop-vs-orange, #ff5a00) !important;
        box-shadow: 0 12px 26px rgba(255, 90, 0, 0.22) !important;
}

.yop-vs-hero {
        padding-top: 96px !important;
}

@media (max-width: 1120px) {
        .yop-vs-home-header-inner {
                grid-template-columns: 1fr !important;
                gap: 14px !important;
                min-height: auto !important;
                padding: 16px 0 !important;
        }

        .yop-vs-home-brand,
        .yop-vs-home-nav,
        .yop-vs-home-header-actions {
                justify-self: center !important;
        }

        .yop-vs-home-nav {
                flex-wrap: wrap !important;
        }
}

@media (max-width: 782px) {
        .yop-vs-home-header {
                top: 46px !important;
        }
}

@media (max-width: 767px) {
        .yop-vs-home-header-inner {
                width: min(100% - 28px, var(--yop-vs-container, 1180px)) !important;
        }

        .yop-vs-home-nav {
                display: none !important;
        }

        .yop-vs-home-header-actions {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                width: 100% !important;
        }

        .yop-vs-home-login,
        .yop-vs-home-header-actions .yop-vs-btn-primary {
                width: 100% !important;
        }

        .yop-vs-hero {
                padding-top: 56px !important;
        }
}
/* YOP_VS_THEME_STEP_12_2_DB_HEADER_REPAIR_END */

/* YOP_VS_THEME_STEP_13_MOBILE_FINALIZATION_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "mobile_tablet_header_hero_cta_finalization",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "mobile_tablet_finalization_styles",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.13",
  "last_updated": "2026-06-17",
  "last_change": "Mobile- und Tablet-Darstellung für Header, Hero, Buttons und finale CTA-Abstände optimiert.",
  "area": "asset",
  "review_note": "Reine Theme-/Design-Finalisierung ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 13: Header ohne WordPress-Admin-Bar korrekt positionieren
   ========================================================== */

body:not(.admin-bar) .yop-vs-home-header {
        top: 0 !important;
}

body.admin-bar .yop-vs-home-header {
        top: 32px !important;
}

/* ==========================================================
   Step 13: Desktop-/Tablet-Header stabil halten
   ========================================================== */

@media (min-width: 901px) and (max-width: 1180px) {
        .yop-vs-home-header-inner {
                grid-template-columns: 200px minmax(0, 1fr) auto !important;
                gap: 18px !important;
                width: min(100% - 34px, var(--yop-vs-container, 1180px)) !important;
                min-height: 74px !important;
                padding: 0 !important;
        }

        .yop-vs-home-brand {
                justify-self: start !important;
        }

        .yop-vs-home-brand-text {
                font-size: 22px !important;
        }

        .yop-vs-home-nav {
                display: flex !important;
                flex-wrap: nowrap !important;
                justify-content: center !important;
                gap: 2px !important;
        }

        .yop-vs-home-nav a {
                min-height: 36px !important;
                padding: 8px 9px !important;
                font-size: 12px !important;
        }

        .yop-vs-home-header-actions {
                display: inline-flex !important;
                justify-self: end !important;
                gap: 8px !important;
                width: auto !important;
        }

        .yop-vs-home-login,
        .yop-vs-home-header-actions .yop-vs-btn-primary {
                width: auto !important;
                min-height: 38px !important;
                padding: 9px 14px !important;
                font-size: 11.5px !important;
        }
}

/* ==========================================================
   Step 13: kleiner Tabletbereich
   ========================================================== */

@media (min-width: 768px) and (max-width: 900px) {
        .yop-vs-home-header-inner {
                display: grid !important;
                grid-template-columns: auto auto !important;
                grid-template-areas:
                        "brand actions"
                        "nav nav" !important;
                align-items: center !important;
                justify-content: space-between !important;
                gap: 12px 18px !important;
                width: min(100% - 34px, var(--yop-vs-container, 1180px)) !important;
                min-height: auto !important;
                padding: 14px 0 !important;
        }

        .yop-vs-home-brand {
                grid-area: brand !important;
                justify-self: start !important;
        }

        .yop-vs-home-header-actions {
                grid-area: actions !important;
                justify-self: end !important;
                display: inline-flex !important;
                width: auto !important;
        }

        .yop-vs-home-nav {
                grid-area: nav !important;
                display: flex !important;
                flex-wrap: wrap !important;
                justify-content: center !important;
                gap: 6px !important;
                width: 100% !important;
        }

        .yop-vs-home-nav a {
                min-height: 34px !important;
                padding: 7px 10px !important;
                font-size: 12px !important;
                background: rgba(255, 90, 0, 0.045) !important;
        }

        .yop-vs-home-login,
        .yop-vs-home-header-actions .yop-vs-btn-primary {
                width: auto !important;
                min-height: 38px !important;
                padding: 9px 14px !important;
        }

        .yop-vs-hero {
                padding-top: 72px !important;
        }
}

/* ==========================================================
   Step 13: Mobile Header kompakt
   ========================================================== */

@media (max-width: 767px) {
        body.admin-bar .yop-vs-home-header {
                top: 46px !important;
        }

        body:not(.admin-bar) .yop-vs-home-header {
                top: 0 !important;
        }

        .yop-vs-home-header {
                background: rgba(255, 255, 255, 0.97) !important;
                box-shadow: 0 10px 26px rgba(16, 16, 16, 0.06) !important;
        }

        .yop-vs-home-header-inner {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                width: min(100% - 28px, var(--yop-vs-container, 1180px)) !important;
                min-height: auto !important;
                padding: 13px 0 !important;
        }

        .yop-vs-home-brand {
                justify-self: center !important;
        }

        .yop-vs-home-brand-icon {
                width: 12px !important;
                height: 12px !important;
                flex-basis: 12px !important;
        }

        .yop-vs-home-brand-text {
                font-size: 22px !important;
        }

        .yop-vs-home-nav {
                display: none !important;
        }

        .yop-vs-home-header-actions {
                display: grid !important;
                grid-template-columns: 1fr 1fr !important;
                gap: 10px !important;
                width: 100% !important;
                justify-content: stretch !important;
        }

        .yop-vs-home-login,
        .yop-vs-home-header-actions .yop-vs-btn-primary {
                width: 100% !important;
                min-height: 42px !important;
                padding: 10px 12px !important;
                font-size: 12px !important;
        }

        .yop-vs-hero {
                padding-top: 50px !important;
        }
}

@media (max-width: 480px) {
        .yop-vs-home-header-inner {
                width: min(100% - 22px, var(--yop-vs-container, 1180px)) !important;
                gap: 10px !important;
        }

        .yop-vs-home-brand-text {
                font-size: 21px !important;
        }

        .yop-vs-home-header-actions {
                grid-template-columns: 1fr !important;
        }

        .yop-vs-home-login,
        .yop-vs-home-header-actions .yop-vs-btn-primary {
                min-height: 40px !important;
        }

        .yop-vs-hero {
                padding-top: 42px !important;
        }
}

/* ==========================================================
   Step 13: Hero Mobile-Politur
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-hero {
                gap: 34px !important;
        }

        .yop-vs-hero-copy {
                text-align: left !important;
        }

        .yop-vs-hero-title,
        .yop-vs-hero h1 {
                font-size: clamp(42px, 13.5vw, 64px) !important;
                line-height: 0.95 !important;
                letter-spacing: -0.075em !important;
        }

        .yop-vs-hero-text,
        .yop-vs-hero-copy p {
                max-width: 100% !important;
                font-size: 15.5px !important;
                line-height: 1.65 !important;
        }

        .yop-vs-hero-actions {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                width: 100% !important;
                margin-top: 26px !important;
        }

        .yop-vs-hero-actions .yop-vs-btn-primary,
        .yop-vs-hero-actions .yop-vs-btn-secondary {
                width: 100% !important;
        }

        .yop-vs-hero-visual {
                margin-top: 4px !important;
        }
}

@media (max-width: 480px) {
        .yop-vs-hero-title,
        .yop-vs-hero h1 {
                font-size: clamp(38px, 13vw, 54px) !important;
        }

        .yop-vs-eyebrow {
                font-size: 10.5px !important;
                letter-spacing: 0.08em !important;
        }
}

/* ==========================================================
   Step 13: Karten und Sektionen Mobile sauberer staffeln
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-section {
                padding-top: 56px !important;
                padding-bottom: 56px !important;
        }

        .yop-vs-section-small {
                padding-top: 38px !important;
                padding-bottom: 38px !important;
        }

        .yop-vs-feature-card,
        .yop-vs-module-card,
        .yop-vs-process-step,
        .yop-vs-trust-stat-card,
        .yop-vs-trust-reason-card {
                border-radius: 20px !important;
        }

        .yop-vs-final-cta {
                padding: 26px 20px !important;
        }

        .yop-vs-final-cta h2 {
                font-size: clamp(30px, 10vw, 42px) !important;
        }

        .yop-vs-final-cta-actions {
                width: 100% !important;
        }
}

/* ==========================================================
   Step 13: Footer Mobile-Feinschliff
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-site-footer__inner {
                padding-top: 44px !important;
                padding-bottom: 32px !important;
        }

        .yop-vs-site-footer__brand p {
                font-size: 13.5px !important;
        }

        .yop-vs-site-footer__column h2 {
                margin-bottom: 12px !important;
        }

        .yop-vs-site-footer__column a {
                margin-bottom: 9px !important;
                font-size: 13.5px !important;
        }
}
/* YOP_VS_THEME_STEP_13_MOBILE_FINALIZATION_END */

/* YOP_VS_THEME_STEP_14_MOBILE_HERO_FIX_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "mobile_hero_overflow_title_button_visual_fix",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "mobile_hero_final_fix_styles",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.14",
  "last_updated": "2026-06-17",
  "last_change": "Mobile-Hero-Überlauf behoben, Titel/Buttons/Visual für 390px und 412px stabilisiert.",
  "area": "asset",
  "review_note": "Reine Theme-/Design-Korrektur ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 14: globalen Horizontal-Overflow verhindern
   ========================================================== */

html,
body {
        max-width: 100% !important;
        overflow-x: hidden !important;
}

.yop-vs-home,
.yop-vs-section,
.yop-vs-hero,
.yop-vs-container,
.elementor-widget-html,
.elementor-widget-container {
        max-width: 100% !important;
}

/* ==========================================================
   Step 14: Mobile Hero vollständig in Viewport halten
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-container {
                width: min(100% - 28px, var(--yop-vs-container, 1180px)) !important;
                max-width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
        }

        .yop-vs-hero,
        .yop-vs-home-hero {
                display: grid !important;
                grid-template-columns: minmax(0, 1fr) !important;
                gap: 30px !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                overflow: hidden !important;
                padding-top: 46px !important;
                padding-bottom: 48px !important;
        }

        .yop-vs-hero-copy,
        .yop-vs-hero-content,
        .yop-vs-hero-visual,
        .yop-vs-dashboard-card,
        .yop-vs-hero-actions,
        .yop-vs-hero-badges {
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                overflow: visible !important;
        }

        .yop-vs-hero-copy {
                position: relative !important;
                z-index: 2 !important;
        }

        .yop-vs-hero h1,
        .yop-vs-hero-title {
                display: block !important;
                width: 100% !important;
                max-width: 100% !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
                font-size: clamp(34px, 11.4vw, 46px) !important;
                line-height: 0.98 !important;
                letter-spacing: -0.065em !important;
                white-space: normal !important;
                overflow-wrap: normal !important;
                word-break: normal !important;
                hyphens: none !important;
        }

        .yop-vs-hero h1 span,
        .yop-vs-hero-title span {
                white-space: normal !important;
        }

        .yop-vs-hero-text,
        .yop-vs-hero-copy p {
                width: 100% !important;
                max-width: 100% !important;
                font-size: 15px !important;
                line-height: 1.58 !important;
                overflow-wrap: break-word !important;
        }

        .yop-vs-hero-actions {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 12px !important;
                margin-top: 24px !important;
        }

        .yop-vs-hero-actions .yop-vs-btn-primary,
        .yop-vs-hero-actions .yop-vs-btn-secondary {
                display: flex !important;
                width: 100% !important;
                max-width: 100% !important;
                min-width: 0 !important;
                justify-content: center !important;
                text-align: center !important;
                transform: none !important;
        }

        .yop-vs-hero-badges {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 10px !important;
                margin-top: 18px !important;
        }

        .yop-vs-hero-badge,
        .yop-vs-badge,
        .yop-vs-pill {
                width: 100% !important;
                max-width: 100% !important;
                justify-content: center !important;
                text-align: center !important;
        }

        .yop-vs-hero-visual {
                margin-top: 2px !important;
                overflow: hidden !important;
        }

        .yop-vs-dashboard-card,
        .yop-vs-hero-visual > * {
                max-width: 100% !important;
                margin-left: auto !important;
                margin-right: auto !important;
                transform: none !important;
        }
}

/* ==========================================================
   Step 14: sehr kleine Mobile-Ansichten 390px / 412px
   ========================================================== */

@media (max-width: 430px) {
        .yop-vs-container {
                width: min(100% - 24px, var(--yop-vs-container, 1180px)) !important;
        }

        .yop-vs-hero,
        .yop-vs-home-hero {
                padding-top: 40px !important;
                gap: 26px !important;
        }

        .yop-vs-hero h1,
        .yop-vs-hero-title {
                font-size: clamp(32px, 10.9vw, 43px) !important;
                line-height: 1 !important;
                letter-spacing: -0.06em !important;
        }

        .yop-vs-hero-text,
        .yop-vs-hero-copy p {
                font-size: 14.5px !important;
                line-height: 1.55 !important;
        }

        .yop-vs-eyebrow {
                max-width: 100% !important;
                padding-left: 12px !important;
                padding-right: 12px !important;
                font-size: 10px !important;
                line-height: 1.25 !important;
                white-space: normal !important;
                text-align: left !important;
        }

        .yop-vs-home-header-inner {
                width: min(100% - 22px, var(--yop-vs-container, 1180px)) !important;
        }

        .yop-vs-home-header-actions {
                grid-template-columns: 1fr !important;
        }

        .yop-vs-dashboard-card {
                border-radius: 24px !important;
        }
}

/* ==========================================================
   Step 14: 768px / 1024px Stabilisierung beibehalten
   ========================================================== */

@media (min-width: 768px) and (max-width: 1180px) {
        .yop-vs-hero,
        .yop-vs-home-hero {
                max-width: 100% !important;
                overflow: hidden !important;
        }

        .yop-vs-hero-copy,
        .yop-vs-hero-visual {
                min-width: 0 !important;
        }

        .yop-vs-hero h1,
        .yop-vs-hero-title {
                max-width: 100% !important;
        }
}
/* YOP_VS_THEME_STEP_14_MOBILE_HERO_FIX_END */

/* YOP_VS_THEME_STEP_16_MOBILE_LANDINGPAGE_POLISH_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "mobile_landingpage_spacing_compaction_final_polish",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "mobile_landingpage_final_polish_styles",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.16",
  "last_updated": "2026-06-17",
  "last_change": "Mobile Landingpage kompakter gemacht, Hero-Leerraum reduziert und mobile Kartenabstände finalisiert.",
  "area": "asset",
  "review_note": "Reine Theme-/Design-Politur ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 16: Mobile Hero kompakter machen
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-hero,
        .yop-vs-home-hero {
                padding-top: 34px !important;
                padding-bottom: 32px !important;
                gap: 0 !important;
                min-height: auto !important;
        }

        .yop-vs-hero-copy,
        .yop-vs-hero-content {
                padding-bottom: 0 !important;
                margin-bottom: 0 !important;
        }

        .yop-vs-hero h1,
        .yop-vs-hero-title {
                margin-top: 18px !important;
                margin-bottom: 16px !important;
                font-size: clamp(32px, 10.8vw, 43px) !important;
                line-height: 1 !important;
                letter-spacing: -0.06em !important;
        }

        .yop-vs-hero-text,
        .yop-vs-hero-copy p {
                margin-bottom: 0 !important;
        }

        .yop-vs-hero-actions {
                margin-top: 22px !important;
                margin-bottom: 0 !important;
        }

        .yop-vs-hero-badges {
                margin-top: 18px !important;
                margin-bottom: 0 !important;
        }

        /*
         * Das große Dashboard-Visual ist am Desktop stark.
         * Auf Mobile macht es die Seite unnötig lang und erzeugt Leerraum.
         */
        .yop-vs-hero-visual,
        .yop-vs-dashboard-card,
        .yop-vs-hero-dashboard,
        .yop-vs-home-hero-visual {
                display: none !important;
        }
}

/* ==========================================================
   Step 16: Mobile Feature-Strip direkt nach Hero sauber staffeln
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-feature-strip,
        .yop-vs-home-feature-strip,
        .yop-vs-quick-features,
        .yop-vs-feature-row {
                margin-top: 0 !important;
                padding-top: 18px !important;
                padding-bottom: 18px !important;
        }

        .yop-vs-feature-strip .yop-vs-container,
        .yop-vs-home-feature-strip .yop-vs-container,
        .yop-vs-quick-features .yop-vs-container {
                display: grid !important;
                grid-template-columns: 1fr !important;
                gap: 10px !important;
        }

        .yop-vs-feature-strip-card,
        .yop-vs-mini-feature-card,
        .yop-vs-feature-pill,
        .yop-vs-feature-strip article,
        .yop-vs-quick-features article {
                width: 100% !important;
                min-height: auto !important;
                padding: 14px 16px !important;
        }
}

/* ==========================================================
   Step 16: Sektionen mobil enger, aber hochwertig
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-section {
                padding-top: 46px !important;
                padding-bottom: 46px !important;
        }

        .yop-vs-section-small {
                padding-top: 30px !important;
                padding-bottom: 30px !important;
        }

        .yop-vs-section-header {
                margin-bottom: 26px !important;
        }

        .yop-vs-section-header h2 {
                font-size: clamp(28px, 8.8vw, 38px) !important;
                line-height: 1.05 !important;
                letter-spacing: -0.06em !important;
        }

        .yop-vs-section-header p {
                font-size: 14.5px !important;
                line-height: 1.55 !important;
        }

        .yop-vs-modules-grid,
        .yop-vs-features-grid,
        .yop-vs-cards-grid,
        .yop-vs-audience-grid,
        .yop-vs-pricing-grid,
        .yop-vs-trust-stats,
        .yop-vs-trust-reasons {
                gap: 14px !important;
        }

        .yop-vs-module-card,
        .yop-vs-feature-card,
        .yop-vs-process-step,
        .yop-vs-trust-stat-card,
        .yop-vs-trust-reason-card,
        .yop-vs-pricing-card {
                min-height: auto !important;
                padding: 20px !important;
        }

        .yop-vs-module-card h3,
        .yop-vs-feature-card h3,
        .yop-vs-process-step h3,
        .yop-vs-trust-reason-card h3,
        .yop-vs-pricing-card h3 {
                margin-bottom: 8px !important;
        }

        .yop-vs-module-card p,
        .yop-vs-feature-card p,
        .yop-vs-process-step p,
        .yop-vs-trust-reason-card p,
        .yop-vs-pricing-card p {
                line-height: 1.5 !important;
        }
}

/* ==========================================================
   Step 16: Plattform-/Vereinswelten-Sektion mobil kompakter
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-platform-panel,
        .yop-vs-audience-main-card,
        .yop-vs-home-platform-card,
        .yop-vs-club-worlds-main {
                padding: 22px !important;
                min-height: auto !important;
        }

        .yop-vs-platform-grid,
        .yop-vs-audience-types,
        .yop-vs-club-worlds-grid {
                gap: 14px !important;
        }

        .yop-vs-platform-card,
        .yop-vs-audience-card,
        .yop-vs-club-world-card {
                min-height: auto !important;
                padding: 18px !important;
        }
}

/* ==========================================================
   Step 16: Preise und Sicherheitsbereich mobil finalisieren
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-pricing-card {
                border-radius: 22px !important;
        }

        .yop-vs-pricing-card.is-featured,
        .yop-vs-pricing-card.yop-vs-featured {
                transform: none !important;
        }

        .yop-vs-security-panel,
        .yop-vs-home-security,
        .yop-vs-security-section {
                border-radius: 26px !important;
        }

        .yop-vs-security-panel {
                padding: 26px 22px !important;
        }

        .yop-vs-security-panel h2,
        .yop-vs-home-security h2 {
                font-size: clamp(28px, 8.8vw, 38px) !important;
                line-height: 1.05 !important;
        }
}

/* ==========================================================
   Step 16: Final CTA Mobile
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-final-cta {
                padding: 24px 20px !important;
                border-radius: 24px !important;
        }

        .yop-vs-final-cta h2 {
                margin-top: 12px !important;
                margin-bottom: 12px !important;
                font-size: clamp(28px, 8.8vw, 38px) !important;
                line-height: 1.08 !important;
        }

        .yop-vs-final-cta p {
                font-size: 14.5px !important;
                line-height: 1.55 !important;
        }

        .yop-vs-final-cta-checks {
                gap: 8px !important;
                margin-top: 18px !important;
        }

        .yop-vs-final-cta-actions {
                margin-top: 20px !important;
        }
}

/* ==========================================================
   Step 16: sehr kleine Mobile-Ansichten
   ========================================================== */

@media (max-width: 430px) {
        .yop-vs-home-header {
                position: sticky !important;
        }

        .yop-vs-hero,
        .yop-vs-home-hero {
                padding-top: 30px !important;
                padding-bottom: 28px !important;
        }

        .yop-vs-hero h1,
        .yop-vs-hero-title {
                font-size: clamp(31px, 10.4vw, 40px) !important;
        }

        .yop-vs-hero-actions .yop-vs-btn-primary,
        .yop-vs-hero-actions .yop-vs-btn-secondary {
                min-height: 48px !important;
        }

        .yop-vs-hero-badge,
        .yop-vs-badge,
        .yop-vs-pill {
                min-height: 42px !important;
        }

        .yop-vs-section {
                padding-top: 42px !important;
                padding-bottom: 42px !important;
        }

        .yop-vs-section-small {
                padding-top: 26px !important;
                padding-bottom: 26px !important;
        }
}
/* YOP_VS_THEME_STEP_16_MOBILE_LANDINGPAGE_POLISH_END */

/* YOP_VS_THEME_STEP_17_MOBILE_FINAL_CLEANUP_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "mobile_final_cleanup_compact_landingpage",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "mobile_final_cleanup_styles",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.17",
  "last_updated": "2026-06-17",
  "last_change": "Mobile Landingpage final gestrafft: Hero-Badges, dekorative Visuals und Sektionen kompakter gestaltet.",
  "area": "asset",
  "review_note": "Reine Theme-/Design-Politur ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 17: Mobile Hero wirklich kompakt halten
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-hero,
        .yop-vs-home-hero {
                padding-top: 26px !important;
                padding-bottom: 26px !important;
        }

        .yop-vs-hero h1,
        .yop-vs-hero-title {
                margin-top: 14px !important;
                margin-bottom: 12px !important;
        }

        .yop-vs-hero-text,
        .yop-vs-hero-copy p {
                font-size: 14px !important;
                line-height: 1.5 !important;
        }

        .yop-vs-hero-actions {
                margin-top: 18px !important;
                gap: 10px !important;
        }

        /*
         * Mobile: Hero-Badges und Feature-Pills entfernen,
         * weil sie Inhalt wiederholen und die Seite unnötig verlängern.
         */
        .yop-vs-hero-badges,
        .yop-vs-home-hero-badges,
        .yop-vs-hero-badge-row,
        .yop-vs-hero-pills,
        .yop-vs-badge-row {
                display: none !important;
        }
}

/* ==========================================================
   Step 17: mobilen Feature-Strip nach Hero ausblenden
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-feature-strip,
        .yop-vs-home-feature-strip,
        .yop-vs-quick-features,
        .yop-vs-feature-row {
                display: none !important;
        }
}

/* ==========================================================
   Step 17: Mobile Sections weiter straffen
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-section {
                padding-top: 38px !important;
                padding-bottom: 38px !important;
        }

        .yop-vs-section-small {
                padding-top: 22px !important;
                padding-bottom: 22px !important;
        }

        .yop-vs-section-header {
                margin-bottom: 20px !important;
        }

        .yop-vs-section-header .yop-vs-eyebrow {
                margin-bottom: 10px !important;
        }

        .yop-vs-section-header h2 {
                margin-bottom: 10px !important;
                font-size: clamp(27px, 8.4vw, 36px) !important;
                line-height: 1.06 !important;
        }

        .yop-vs-section-header p {
                margin-bottom: 0 !important;
                font-size: 13.8px !important;
                line-height: 1.48 !important;
        }
}

/* ==========================================================
   Step 17: Mobile Karten kompakter
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-modules-grid,
        .yop-vs-features-grid,
        .yop-vs-cards-grid,
        .yop-vs-audience-grid,
        .yop-vs-pricing-grid,
        .yop-vs-trust-stats,
        .yop-vs-trust-reasons,
        .yop-vs-platform-grid,
        .yop-vs-audience-types,
        .yop-vs-club-worlds-grid {
                gap: 12px !important;
        }

        .yop-vs-module-card,
        .yop-vs-feature-card,
        .yop-vs-process-step,
        .yop-vs-trust-stat-card,
        .yop-vs-trust-reason-card,
        .yop-vs-pricing-card,
        .yop-vs-platform-card,
        .yop-vs-audience-card,
        .yop-vs-club-world-card {
                padding: 17px !important;
                border-radius: 18px !important;
        }

        .yop-vs-module-card h3,
        .yop-vs-feature-card h3,
        .yop-vs-process-step h3,
        .yop-vs-trust-reason-card h3,
        .yop-vs-pricing-card h3,
        .yop-vs-platform-card h3,
        .yop-vs-audience-card h3,
        .yop-vs-club-world-card h3 {
                margin-bottom: 7px !important;
                font-size: 16px !important;
                line-height: 1.15 !important;
        }

        .yop-vs-module-card p,
        .yop-vs-feature-card p,
        .yop-vs-process-step p,
        .yop-vs-trust-reason-card p,
        .yop-vs-pricing-card p,
        .yop-vs-platform-card p,
        .yop-vs-audience-card p,
        .yop-vs-club-world-card p {
                font-size: 12.8px !important;
                line-height: 1.42 !important;
        }

        .yop-vs-module-card ul,
        .yop-vs-feature-card ul,
        .yop-vs-pricing-card ul {
                margin-top: 10px !important;
        }

        .yop-vs-module-card li,
        .yop-vs-feature-card li,
        .yop-vs-pricing-card li {
                margin-bottom: 5px !important;
                font-size: 12.4px !important;
                line-height: 1.35 !important;
        }
}

/* ==========================================================
   Step 17: Plattform-Sektion Mobile kompakter
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-platform-panel,
        .yop-vs-audience-main-card,
        .yop-vs-home-platform-card,
        .yop-vs-club-worlds-main {
                padding: 18px !important;
                border-radius: 22px !important;
        }

        /*
         * Mobile: kleine Mockup-/Dashboard-Karte innerhalb der Plattformkarte ausblenden,
         * damit die Sektion weniger Höhe verbraucht.
         */
        .yop-vs-platform-panel .yop-vs-dashboard-mini,
        .yop-vs-audience-main-card .yop-vs-dashboard-mini,
        .yop-vs-home-platform-card .yop-vs-dashboard-mini,
        .yop-vs-club-worlds-main .yop-vs-dashboard-mini,
        .yop-vs-platform-panel .yop-vs-mini-dashboard,
        .yop-vs-audience-main-card .yop-vs-mini-dashboard,
        .yop-vs-home-platform-card .yop-vs-mini-dashboard,
        .yop-vs-club-worlds-main .yop-vs-mini-dashboard {
                display: none !important;
        }
}

/* ==========================================================
   Step 17: Sicherheitsbereich Mobile kürzen
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-security-panel,
        .yop-vs-home-security,
        .yop-vs-security-section {
                padding: 24px 18px !important;
                border-radius: 24px !important;
        }

        .yop-vs-security-panel h2,
        .yop-vs-home-security h2,
        .yop-vs-security-section h2 {
                margin-bottom: 12px !important;
                font-size: clamp(26px, 8.2vw, 34px) !important;
                line-height: 1.06 !important;
        }

        .yop-vs-security-panel p,
        .yop-vs-home-security p,
        .yop-vs-security-section p {
                font-size: 13.5px !important;
                line-height: 1.48 !important;
        }

        /*
         * Das Sicherheits-Visual ist am Desktop schön,
         * mobil verlängert es die Seite stark.
         */
        .yop-vs-security-visual,
        .yop-vs-security-illustration,
        .yop-vs-security-card-visual,
        .yop-vs-home-security-visual {
                display: none !important;
        }
}

/* ==========================================================
   Step 17: Trust-Zahlen und Final CTA Mobile
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-trust-stat-card {
                min-height: auto !important;
        }

        .yop-vs-trust-stat-card strong {
                font-size: 24px !important;
        }

        .yop-vs-final-cta {
                padding: 22px 18px !important;
                border-radius: 22px !important;
        }

        .yop-vs-final-cta h2 {
                font-size: clamp(26px, 8.2vw, 34px) !important;
                line-height: 1.08 !important;
        }

        .yop-vs-final-cta p {
                font-size: 13.5px !important;
                line-height: 1.48 !important;
        }

        .yop-vs-final-cta-checks {
                display: none !important;
        }

        .yop-vs-final-cta-actions {
                margin-top: 16px !important;
        }
}

/* ==========================================================
   Step 17: sehr kleine Mobile-Ansichten
   ========================================================== */

@media (max-width: 430px) {
        .yop-vs-hero,
        .yop-vs-home-hero {
                padding-top: 24px !important;
                padding-bottom: 24px !important;
        }

        .yop-vs-hero h1,
        .yop-vs-hero-title {
                font-size: clamp(30px, 10vw, 38px) !important;
        }

        .yop-vs-section {
                padding-top: 34px !important;
                padding-bottom: 34px !important;
        }

        .yop-vs-section-small {
                padding-top: 20px !important;
                padding-bottom: 20px !important;
        }
}
/* YOP_VS_THEME_STEP_17_MOBILE_FINAL_CLEANUP_END */

/* YOP_VS_THEME_STEP_17_1_MOBILE_EMPTY_SPACING_FIX_START */
/*
YOPT_DEV_STAMP_START
{
  "project": "vereinssuite",
  "plugin": "yop-vereinssuite",
  "theme": "yop-vereinssuite-child",
  "legacy_project_name": "vereinsmanager",
  "exclusive_platform": "vereinssuite.de",
  "deployment_model": "exclusive_saas_cloud",
  "module": "website_theme",
  "feature": "vereinssuite_marketing_homepage",
  "sub_feature": "mobile_empty_spacing_and_hero_badge_cleanup",
  "file": "assets/css/yop-vereinssuite-frontend.css",
  "file_role": "frontend_design_stylesheet",
  "object_role": "mobile_spacing_cleanup_styles",
  "development_status": "in_progress",
  "development_phase": 13,
  "version": "0.1.0-beta.17.1",
  "last_updated": "2026-06-17",
  "last_change": "Mobile Leerabstände durch leere p/br-Tags reduziert und Hero-Badges/Visuals robuster ausgeblendet.",
  "area": "asset",
  "review_note": "Reine Theme-/Design-Politur ohne App-Logik, ohne Datenbankzugriff und ohne Vereinsdaten.",
  "supports_saas": true,
  "supports_self_hosted": false,
  "supports_multi_tenant": false,
  "requires_active_club_context": false,
  "uses_platform_database": false,
  "uses_club_database": false,
  "uses_separate_club_database": false,
  "stores_club_id": false,
  "requires_license_check": false,
  "requires_plan_check": false,
  "requires_module_check": false,
  "requires_permission_check": false,
  "requires_audit_log": false,
  "handles_personal_data": false,
  "handles_sensitive_data": false,
  "handles_child_data": false,
  "handles_health_data": false,
  "handles_payment_data": false,
  "handles_documents": false,
  "handles_uploads": false,
  "supports_gutenberg": true,
  "supports_elementor": true
}
YOPT_DEV_STAMP_END
*/

/* ==========================================================
   Step 17.1: Elementor/wpautop Leerabstände mobil entfernen
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-home > p:empty,
        .yop-vs-site-main > p:empty,
        .elementor-widget-html p:empty,
        .elementor-widget-container > p:empty,
        main > p:empty,
        section > p:empty,
        div > p:empty {
                display: none !important;
                height: 0 !important;
                min-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                line-height: 0 !important;
        }

        .yop-vs-home br,
        .yop-vs-site-main br,
        .elementor-widget-html br,
        .elementor-widget-container br {
                display: none !important;
        }
}

/* ==========================================================
   Step 17.1: Hero-Badges mobil wirklich entfernen
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-hero [class*="badge"],
        .yop-vs-hero [class*="Badge"],
        .yop-vs-hero [class*="pill"],
        .yop-vs-hero [class*="Pill"],
        .yop-vs-hero [class*="tag"],
        .yop-vs-hero [class*="Tag"],
        .yop-vs-home-hero [class*="badge"],
        .yop-vs-home-hero [class*="pill"],
        .yop-vs-home-hero [class*="tag"] {
                display: none !important;
        }

        .yop-vs-hero .yop-vs-eyebrow,
        .yop-vs-home-hero .yop-vs-eyebrow {
                display: inline-flex !important;
        }
}

/* ==========================================================
   Step 17.1: Mobile Hero-Visual / Dashboard robuster ausblenden
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-hero-visual,
        .yop-vs-home-hero-visual,
        .yop-vs-hero-dashboard,
        .yop-vs-dashboard-preview,
        .yop-vs-dashboard-card,
        .yop-vs-app-preview,
        .yop-vs-hero-mockup,
        .yop-vs-home-mockup,
        .yop-vs-hero .yop-vs-preview-card,
        .yop-vs-home-hero .yop-vs-preview-card {
                display: none !important;
                height: 0 !important;
                min-height: 0 !important;
                margin: 0 !important;
                padding: 0 !important;
                overflow: hidden !important;
        }
}

/* ==========================================================
   Step 17.1: Mobile Abstände nach Hero und vor Sektionen glätten
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-hero + p,
        .yop-vs-hero + p + section,
        .yop-vs-home-hero + p,
        .yop-vs-home-hero + p + section {
                margin-top: 0 !important;
        }

        .yop-vs-hero + section,
        .yop-vs-home-hero + section {
                margin-top: 0 !important;
                padding-top: 34px !important;
        }

        .yop-vs-section + p,
        .yop-vs-section-small + p {
                display: none !important;
                margin: 0 !important;
                padding: 0 !important;
        }
}

/* ==========================================================
   Step 17.1: Kartenlisten mobil ruhiger und dichter
   ========================================================== */

@media (max-width: 767px) {
        .yop-vs-module-card,
        .yop-vs-feature-card,
        .yop-vs-process-step,
        .yop-vs-pricing-card,
        .yop-vs-trust-stat-card,
        .yop-vs-trust-reason-card,
        .yop-vs-audience-card,
        .yop-vs-platform-card,
        .yop-vs-club-world-card {
                box-shadow: 0 10px 24px rgba(16, 16, 16, 0.045) !important;
        }

        .yop-vs-module-card::after,
        .yop-vs-feature-card::after,
        .yop-vs-process-step::after,
        .yop-vs-pricing-card::after,
        .yop-vs-trust-stat-card::after,
        .yop-vs-trust-reason-card::after,
        .yop-vs-audience-card::after,
        .yop-vs-platform-card::after,
        .yop-vs-club-world-card::after {
                opacity: 0.55 !important;
        }
}

/* ==========================================================
   Step 17.1: finaler mobiler Seitenfluss
   ========================================================== */

@media (max-width: 430px) {
        .yop-vs-hero,
        .yop-vs-home-hero {
                padding-top: 22px !important;
                padding-bottom: 20px !important;
        }

        .yop-vs-section {
                padding-top: 30px !important;
                padding-bottom: 30px !important;
        }

        .yop-vs-section-small {
                padding-top: 18px !important;
                padding-bottom: 18px !important;
        }
}
/* YOP_VS_THEME_STEP_17_1_MOBILE_EMPTY_SPACING_FIX_END */