/* Theme variables are defined in styles/theme.css */

/* Reset and Base Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
	font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
	line-height: 1.7;
	color: var(--text-color);
	background: var(--background-gradient);
	transition: var(--transition);
	/* prevent horizontal scroll while allowing safe-area paddings */
	overflow-x: hidden;
	width: 100%;
	max-width: 100vw;
	/* Use CSS env() safe area insets (for iOS notch devices) and provide a minimum side spacer
	   so content is not hidden behind notches in landscape. We do NOT zoom; only add padding. */
	--safe-side: max(env(safe-area-inset-left), env(safe-area-inset-right), 8px);
	padding-left: var(--safe-side);
	padding-right: var(--safe-side);
	/* allow theme transitions without hiding initial paint */
}

body.legal-page {
	--legal-offset: clamp(96px, 12vh, 150px);
}

body.legal-page .legal-page-spacer {
	height: var(--legal-offset);
}

@media (max-width: 768px) {
	body.legal-page {
		--legal-offset: clamp(180px, 35vw, 220px);
	}
}

* {
	box-sizing: border-box;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	/* keep internal padding but respect safe-area insets
	   we use padding-inline so it works with RTL as well */
	padding-inline: clamp(12px, 3vw, 24px);
	/* ensure container doesn't cause horizontal overflow on devices with large safe-area insets */
	box-sizing: border-box;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 1rem;
	color: var(--text-color);
}

h1 {
	font-size: clamp(2.5rem, 5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.02em;
}

h2 {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 700;
	position: relative;
}

h2::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 4px;
	background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
	border-radius: 2px;
}

h3 {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 600;
}

p {
	margin-bottom: 1.5rem;
	color: var(--text-light);
	font-size: 1.1rem;
	line-height: 1.8;
}

a {
	text-decoration: none;
	color: var(--primary-color);
	transition: var(--transition);
}

a:hover {
	color: var(--primary-light);
}

/* ULTRA MODERN CTA BUTTON - COSMIC PULSE */
/* =========================================
   "CINEMATIC GLOW" - REQUESTED DESIGN
   ========================================= */

.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    /* Text */
    color: #ffffff !important;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;

    /* Shape & Size */
    padding: 1rem 3rem;
    border-radius: 8px; /* Slight rounding per image */

    /* Background: Deep Red Gradient */
    background: linear-gradient(180deg, #b32020 0%, #6d0a0a 100%);
    
    /* The Border Structure */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 
        0 0 0 4px rgba(0, 0, 0, 0.2), /* Subtle spacing/darkening outside */
        0 0 20px rgba(185, 28, 28, 0.4), /* Red ambient glow */
        inset 0 1px 0 rgba(255, 255, 255, 0.3); /* Inner top highlight */

    cursor: pointer;
    transition: all 0.3s ease;
    overflow: visible; /* Needed for flares outside/on border */
    z-index: 10;
}

/* Light Mode Override for Button - Ensure it pops against white walls */
body:not([data-theme="dark"]) .btn-primary {
    /* Darker, flatter red gradient to stand out against white */
    background: linear-gradient(180deg, #d50000 0%, #aa0000 100%);
    box-shadow: 
        0 10px 20px -5px rgba(100, 0, 0, 0.3), /* Darker shadow */
        0 0 0 4px rgba(255, 255, 255, 0.5), /* White ring instead of dark ring */
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border: 1px solid #990000;
}

body:not([data-theme="dark"]) .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 
        0 15px 30px -5px rgba(100, 0, 0, 0.4),
        0 0 0 4px rgba(255, 255, 255, 0.5),
        inset 0 0 0 2px rgba(255,255,255,0.2);
}

/* TOP FLARE - The bright light on top border */
.btn-primary::before {
    content: '';
    position: absolute;
    top: -2px; /* Centered on the top border */
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: white;
    border-radius: 100%;
    filter: blur(2px);
    box-shadow: 
        0 0 10px 2px rgba(255, 255, 255, 0.8),
        0 0 20px 4px rgba(237, 28, 36, 0.6);
    opacity: 0.9;
    transition: all 0.3s ease;
    z-index: 11;
}

/* BOTTOM FLARE - The bright light on bottom border */
.btn-primary::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 3px;
    background: white;
    border-radius: 100%;
    filter: blur(2px);
    box-shadow: 
        0 0 10px 2px rgba(255, 255, 255, 0.8),
        0 0 20px 4px rgba(237, 28, 36, 0.6);
    opacity: 0.9;
    transition: all 0.3s ease;
    z-index: 11;
}

/* Hover Effects */
.btn-primary:hover {
    background: linear-gradient(180deg, #d32f2f 0%, #8a0e0e 100%);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 
        0 0 0 4px rgba(0, 0, 0, 0.2), 
        0 10px 30px rgba(220, 38, 38, 0.6),
        inset 0 0 20px rgba(255, 255, 255, 0.1); /* Inner glow */
}

.btn-primary:hover::before,
.btn-primary:hover::after {
    width: 90%; /* Flare expands width-wise */
    opacity: 1;
    filter: blur(1px); /* Sharper */
    background: #fff;
}

.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
}

.btn-primary:hover .scanner-line {
    left: 200%;
    transition: left 0.6s ease-in-out;
}

/* ACTIVE/CLICK STATE */
.btn-primary:active {
    transform: translateY(1px);
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.5);
}

/* Focus State */
.btn-primary:focus-visible {
    box-shadow: 
        0 0 0 4px rgba(255, 255, 255, 1),
        0 0 0 8px #ED1C24;
}

/* INTERNAL ICON ANIMATION */
.btn-primary i {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primary:hover i {
    transform: translateX(5px) scale(1.2);
}

/* DARK MODE ADAPTATION */
[data-theme="dark"] .btn-primary {
    background: #000;
    border: 1px solid #ED1C24;
}

[data-theme="dark"] .btn-primary::before {
    opacity: 0.8;
}

[data-theme="dark"] .btn-primary:hover {
    box-shadow: 
        0 0 0 1px #ED1C24,
        0 0 30px rgba(237, 28, 36, 0.6);
}

/* Dark mode overrides */
[data-theme="dark"] .btn-primary {
	box-shadow: 
		0 10px 30px -10px rgba(255, 23, 68, 0.4),
		inset 0 -4px 4px rgba(0,0,0,0.5),
		inset 0 2px 4px rgba(255,255,255,0.2);
}

[data-theme="dark"] .btn-primary:hover {
	box-shadow: 
		0 20px 40px -10px rgba(255, 23, 68, 0.6),
		0 0 0 4px rgba(255, 255, 255, 0.1),
		inset 0 -4px 4px rgba(0,0,0,0.5),
		inset 0 2px 4px rgba(255,255,255,0.3);
}

@media (max-width: 480px) {
    .btn-primary {
        padding: 1rem 2rem;
        font-size: 1.1rem;
        width: auto;
        max-width: 100%;
    }
}

.theme-toggle {
	background: var(--glass-bg, rgba(255, 255, 255, 0.7));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.3));
	color: var(--text-color);
	font-size: 18px;
	cursor: pointer;
	margin-left: 20px;
	padding: 10px;
	border-radius: 50%;
	width: 45px;
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-bounce);
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.06),
		0 4px 16px rgba(0, 0, 0, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	position: relative;
	overflow: hidden;
}

.theme-toggle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(circle at 50% 50%, rgba(255, 200, 50, 0.3) 0%, transparent 70%);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 50%;
}

.theme-toggle:hover {
	color: var(--primary-color);
	border-color: rgba(237, 28, 36, 0.3);
	transform: scale(1.1) rotate(15deg);
	box-shadow: 
		0 4px 12px rgba(237, 28, 36, 0.15),
		0 8px 24px rgba(0, 0, 0, 0.1);
}

.theme-toggle:hover::before {
	opacity: 1;
}

[data-theme="dark"] .theme-toggle {
	background: var(--glass-bg, rgba(30, 30, 30, 0.6));
	border-color: rgba(163, 163, 163, 0.15);
}

[data-theme="dark"] .theme-toggle::before {
	background: radial-gradient(circle at 50% 50%, rgba(100, 150, 255, 0.3) 0%, transparent 70%);
}

[data-theme="dark"] .theme-toggle:hover {
	box-shadow: 
		0 4px 12px rgba(237, 28, 36, 0.25),
		0 8px 24px rgba(0, 0, 0, 0.25),
		0 0 30px rgba(100, 150, 255, 0.15);
}

/* Language selector */
.lang-select-wrapper {
	display: inline-flex;
	align-items: center;
}
.nav-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nav-btn-size, 52px);
	height: var(--nav-btn-size, 52px);
	border-radius: 50%;
	background: var(--glass-bg, rgba(255, 255, 255, 0.7));
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.3));
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.06),
		0 4px 16px rgba(0, 0, 0, 0.04),
		inset 0 1px 0 rgba(255, 255, 255, 0.5);
	cursor: pointer;
	flex-shrink: 0;
	transition: var(--transition);
	position: relative;
	overflow: hidden;
}

.nav-button::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(237, 28, 36, 0.1) 0%, rgba(237, 28, 36, 0.05) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 50%;
}

.nav-button:hover {
	transform: translateY(-2px) scale(1.05);
	box-shadow: 
		0 4px 12px rgba(237, 28, 36, 0.15),
		0 8px 24px rgba(0, 0, 0, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.6);
	border-color: rgba(237, 28, 36, 0.3);
}

.nav-button:hover::before {
	opacity: 1;
}

.nav-button:active {
	transform: translateY(0) scale(0.98);
	box-shadow: 
		0 2px 4px rgba(0, 0, 0, 0.1),
		inset 0 2px 4px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .nav-button {
	background: var(--glass-bg, rgba(30, 30, 30, 0.6));
	border-color: rgba(163, 163, 163, 0.15);
	box-shadow: 
		0 2px 8px rgba(0, 0, 0, 0.2),
		0 4px 16px rgba(0, 0, 0, 0.15),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .nav-button:hover {
	background: rgba(237, 28, 36, 0.15);
	border-color: rgba(237, 28, 36, 0.4);
	box-shadow: 
		0 4px 12px rgba(237, 28, 36, 0.25),
		0 8px 24px rgba(0, 0, 0, 0.25),
		0 0 30px rgba(237, 28, 36, 0.1);
}

.nav-button i, .nav-button img {
	font-size: 1.4rem;
	position: relative;
	z-index: 1;
}

/* header phone-link visuals removed — header phone control intentionally removed */


/* Specific modifiers */
.lang-button { --nav-btn-size: 58px; }
.theme-button { --nav-btn-size: 58px; }
.menu-button { --nav-btn-size: 58px; }
.phone-button { --nav-btn-size: 58px; }

/* Phone: default shows text when not compact, becomes circular when compact */
.contact-info { gap: 8px; }
.contact-info .phone-link { /* header phone removed — keep default inline behavior for content-rendered phone links */ --phone-link-inherit: 1; }
.lang-select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	color: transparent;
	border: none;
	/* Keep button perfectly square using a CSS variable */
	--lang-size: 58px;
	width: var(--lang-size);
	height: var(--lang-size);
	min-width: var(--lang-size);
	padding: 0;
	border-radius: 50%;
	font-size: 32px; /* large emoji */
	line-height: 1;
	/* margin-right removed - spacing handled by wrapper to keep overlay aligned */
	margin-right: 0;
	overflow: hidden;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
	/* Remove default arrow in some browsers */
	background-image: none;
	flex: 0 0 auto; /* do not shrink or grow inside flex containers */
	opacity: 1;
}

/* Hide the select's displayed text when closed so the overlay shows a single flag.
	Keep options sized normally so the dropdown shows flag + language name. */
.lang-select option { 
	color: var(--text-color); 
	background: var(--card-bg);
	font-size: 18px; 
	opacity: 1;
}

/* Some browsers show the selected option inside the select; ensure it doesn't show the duplicate flag */
.lang-select::-ms-value { color: transparent; background: transparent; }

/* Overlay element that shows the centered flag when select is closed */
.lang-select-wrapper {
	position: relative;
	/* Allow a small horizontal gap to the right of the select so it doesn't butt up to other header items.
	   Use CSS vars so we can nudge alignment if emoji rendering needs micro-adjustment. */
	--lang-gap-right: 20px;
	/* horizontal offset (positive = move flag to the right, negative = left) */
	--lang-offset: 0px;
	padding-right: var(--lang-gap-right);
}

/* When lang-select-wrapper is used as a nav-button, remove extra padding so it fits the circle */
.lang-select-wrapper.nav-button { padding-right: 0; width: var(--nav-btn-size, 52px); }
.lang-display {
	position: absolute;
	/* Center the flag horizontally and vertically */
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none; /* clicks go to the select */
	font-size: 32px;
	line-height: 1;
	width: var(--lang-size, 58px);
	height: var(--lang-size, 58px);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
}

/* Ensure select is always clickable and on top */
.lang-select {
	position: relative;
	z-index: 2;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
}

/* Improve option appearance: show flag + language name where supported by browser */
.lang-select option { padding-left: 8px; }

/* For small screens, slightly reduce size */
@media (max-width: 480px) {
	.lang-select { --lang-size: 50px; font-size: 28px; }
	.lang-display { width: var(--lang-size); height: var(--lang-size); font-size: 26px; }
	.nav-button { --nav-btn-size: 50px; }
}

/* use a tighter size on very narrow viewports to avoid overflow */
@media (max-width: 360px) {
	.lang-select { --lang-size: 46px; font-size: 24px; }
	.lang-display { width: var(--lang-size); height: var(--lang-size); font-size: 22px; }
	.nav-button { --nav-btn-size: 46px; }
}

/* For very small screens or tall aspect ratios (e.g., 9:16), stack header vertically with centered logo and buttons below */
@media (max-width: 480px), (max-aspect-ratio: 9/16) {
	header .container {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 10px 15px;
	}

	.header-actions {
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px;
	}
}

.lang-select:focus { outline: 2px solid var(--primary-light); }

/* Hide native dropdown arrow for a cleaner flag-only button */
.lang-select::-ms-expand { display: none; }
.lang-select::-webkit-search-decoration,
.lang-select::-webkit-search-cancel-button,
.lang-select::-webkit-search-results-button,
.lang-select::-webkit-search-results-decoration { display: none; }
.lang-select { appearance: none; -webkit-appearance: none; }
.lang-select::-moz-focus-inner { border: 0; }

/* Reduce vertical spacing inside native dropdown list where possible */
.lang-select option {
	font-size: 22px; /* slightly smaller so rows are tighter */
	line-height: 1; /* tighter line height */
	padding: 2px 6px; /* some browsers honor option padding */
}

/* Dark mode styling for language dropdown */
[data-theme="dark"] .lang-select option {
	color: white;
	background: var(--card-bg);
}

/* Dark mode styling for all form elements (excluding language selector) */
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea,
[data-theme="dark"] .contact-form select,
[data-theme="dark"] .application-form input,
[data-theme="dark"] .application-form textarea,
[data-theme="dark"] .application-form select {
	background: var(--card-bg) !important;
	color: var(--text-color) !important;
	border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus,
[data-theme="dark"] .contact-form select:focus,
[data-theme="dark"] .application-form input:focus,
[data-theme="dark"] .application-form textarea:focus,
[data-theme="dark"] .application-form select:focus {
	border-color: var(--primary-color) !important;
	box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.2) !important;
}

[data-theme="dark"] .application-form select option,
[data-theme="dark"] .contact-form select option {
	background: var(--card-bg) !important;
	color: var(--text-color) !important;
}

[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder,
[data-theme="dark"] .application-form input::placeholder,
[data-theme="dark"] .application-form textarea::placeholder {
	color: rgba(255, 255, 255, 0.6) !important;
}

/* Header */
header {
    /* Slightly stronger shadow in light mode for separation */
	background: var(--header-bg);
	backdrop-filter: blur(var(--blur-strong, 30px)) saturate(180%);
	-webkit-backdrop-filter: blur(var(--blur-strong, 30px)) saturate(180%);
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03); /* Added shadow */
	position: fixed;
	/* Full full-bleed header */
	width: 100%;
	left: 0;
	right: 0;
	/* Add safe-area padding to content if needed later, or rely on container */
	top: 0;
	z-index: 10000;
	transition: var(--transition);
	border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.2));
	overflow: visible;
}

/* Enhanced scrolled header state */
header.scrolled {
	background: var(--glass-bg-strong, rgba(255, 255, 255, 0.92));
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.08),
		0 8px 24px rgba(0, 0, 0, 0.06),
		0 0 1px rgba(0, 0, 0, 0.1);
	border-bottom-color: rgba(237, 28, 36, 0.12);
}

[data-theme="dark"] header {
	border-bottom-color: rgba(163, 163, 163, 0.1);
}

[data-theme="dark"] header.scrolled {
	background: rgba(18, 18, 18, 0.92);
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.25),
		0 8px 24px rgba(0, 0, 0, 0.2),
		0 0 40px rgba(237, 28, 36, 0.08);
	border-bottom-color: rgba(237, 28, 36, 0.15);
}

/* Hover area at top of page to show navigation */
.hover-trigger {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 20px;
	z-index: 999;
	background: transparent;
}

.hover-trigger:hover ~ header,
.hover-trigger:hover + header {
	transform: translateY(0) !important;
}

/* ===== RESPONSIVE BEHAVIOR ===== */

/* Dropdown menu below navigation */
.mobile-nav {
	position: fixed;
	top: 85px; /* Position below header */
	/* allow mobile nav to be full width but inset by safe-area to avoid notches */
	left: var(--safe-side);
	right: var(--safe-side);
	width: calc(100% - (var(--safe-side) * 2));
	background: var(--glass-bg-strong, rgba(255, 255, 255, 0.92));
	backdrop-filter: blur(var(--blur-strong, 30px)) saturate(180%);
	-webkit-backdrop-filter: blur(var(--blur-strong, 30px)) saturate(180%);
	border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.3));
	border-radius: 0 0 var(--border-radius) var(--border-radius);
	box-shadow: 
		0 8px 32px rgba(0, 0, 0, 0.12),
		0 16px 48px rgba(0, 0, 0, 0.08);
	z-index: 999; /* Above content, below header */
	transform: translateY(-100%);
	opacity: 0;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	overflow: hidden;
	visibility: hidden;
	padding-top: 0;
}

/* Landscape phones (wider than tall): increase side spacer to ensure notches don't overlap content
   without zooming. This adds more breathing room when device is in landscape orientation. */
@media only screen and (orientation: landscape) and (max-width: 900px) {
	body {
		--safe-side: max(env(safe-area-inset-left), env(safe-area-inset-right), 18px);
		padding-left: var(--safe-side);
		padding-right: var(--safe-side);
	}

	header {
		width: calc(100% - (var(--safe-side) * 2));
		left: var(--safe-side);
		right: var(--safe-side);
	}

	.mobile-nav {
		left: var(--safe-side);
		right: var(--safe-side);
		width: calc(100% - (var(--safe-side) * 2));
	}
}

/* Extremely small viewports: reduce horizontal paddings slightly but keep at least 8px gap */
@media (max-width: 360px) {
	body { --safe-side: max(env(safe-area-inset-left), env(safe-area-inset-right), 8px); }
	.container { padding-inline: 10px; }
	
	header .container {
		padding: 4px 8px;
		gap: 4px;
	}
	
	.logo img {
		height: 38px;
	}
	
	.header-actions {
		gap: 4px;
	}
	
	/* Further reduce button sizes on very small screens */
	.nav-button, .nav-btn {
		--nav-btn-size: 34px !important;
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		min-height: 34px !important;
		font-size: 14px;
	}
	
	.nav-button i, .nav-btn i {
		font-size: 14px;
	}
	
	.lang-select {
		--lang-size: 34px !important;
		width: 34px !important;
		height: 34px !important;
		min-width: 34px !important;
		font-size: 20px;
	}
	
	.lang-display {
		font-size: 20px;
		width: 34px;
		height: 34px;
	}
}

.mobile-nav.active {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
}

/* Keep header visible when menu is active */
header.menu-active {
	z-index: 10001 !important;
}

/* Dark mode header remains visible when menu is active */
[data-theme="dark"] header.menu-active {
	z-index: 10001 !important;
}

/* Top accent bar */
.mobile-nav::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary), var(--primary-light));
	z-index: 1;
}

.mobile-nav ul {
	list-style: none;
	margin: 0;
	padding: 20px 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
	position: relative;
	z-index: 1;
}

.mobile-nav ul li {
	width: 100%;
	text-align: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-nav ul li a {
	display: block;
	padding: 18px 20px;
	color: var(--text-color);
	text-decoration: none;
	font-weight: 500;
	font-size: 16px;
	transition: all 0.3s ease;
	border-bottom: 1px solid rgba(237, 28, 36, 0.08);
	position: relative;
}

.mobile-nav ul li a:hover {
	background: linear-gradient(135deg, rgba(237, 28, 36, 0.08), rgba(237, 28, 36, 0.04));
	color: var(--primary);
	transform: translateX(4px);
}

.mobile-nav ul li:last-child a {
	border-bottom: none;
}

/* Dark mode styles */
[data-theme="dark"] .mobile-nav {
	background: var(--glass-bg-strong, rgba(18, 18, 18, 0.92));
	border-bottom-color: rgba(163, 163, 163, 0.1);
	box-shadow: 
		0 8px 32px rgba(0, 0, 0, 0.4),
		0 16px 48px rgba(0, 0, 0, 0.3),
		0 0 60px rgba(237, 28, 36, 0.08);
}

[data-theme="dark"] .mobile-nav ul li a {
	color: var(--text-color);
	border-bottom-color: rgba(237, 28, 36, 0.15);
}

[data-theme="dark"] .mobile-nav ul li a:hover {
	background: linear-gradient(135deg, rgba(237, 28, 36, 0.1), rgba(237, 28, 36, 0.05));
	color: var(--primary-light);
}

header.scrolled {
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] header.scrolled {
	background: rgba(42, 42, 42, 0.9);
}

header .container {
	display: grid;
	grid-template-columns: auto 1fr auto; /* logo | nav | actions */
	align-items: center;
	gap: 1rem; /* small gap between columns */
	padding: 15px 20px;
	overflow: visible;
	position: relative;
}

.header-actions {
	display: flex;
	align-items: center;
	gap: 10px; /* tighter gap to avoid overlaps */
}


/* ===== NEW HAMBURGER MENU - BELOW NAVIGATION ===== */

/* Hamburger button - positioned next to theme toggle */
#mobile-menu-toggle {
	display: none !important;
}
.mobile-menu-toggle {
	background: var(--card-bg);
	border: 2px solid rgba(237, 28, 36, 0.2);
	color: var(--text-color);
	font-size: 16px;
	cursor: pointer;
	padding: 10px;
	border-radius: 12px;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	overflow: hidden;
	margin-left: 15px;
}

.mobile-menu-toggle::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
	opacity: 0;
	transition: opacity 0.3s ease;
	border-radius: 10px;
}

.mobile-menu-toggle:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 16px rgba(237, 28, 36, 0.2);
}

.mobile-menu-toggle:hover::before {
	opacity: 0.1;
}

.mobile-menu-toggle.active {
	color: var(--primary-color);
	border-color: var(--primary-color);
	transform: translateY(-1px);
}

.mobile-menu-toggle.active::before {
	opacity: 0.15;
}

/* Portrait mode (taller than wide) */
@media (max-aspect-ratio: 1/1) {
	.mobile-menu-toggle {
		width: 32px;
		height: 32px;
		font-size: 13px;
		padding: 6px;
		margin-left: 8px;
	}
}

.logo {
	position: relative;
	z-index: 2;
}

.logo img {
	height: 65px;
	transition: var(--transition);
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

.logo:hover img {
	transform: scale(1.05);
}

nav {
	overflow: visible;
	position: relative;
	z-index: 10;
}

/* desktop nav should occupy the central grid column and fill available space */
.desktop-nav {
	grid-column: 2 / 3;
	width: 100%;
	/* limit the central nav so items can't spread indefinitely on very wide screens */
	max-width: 600px; /* reasonable max width for nav content */
	margin-left: auto;
	margin-right: auto;
	padding: 0 12px; /* slight breathing room */
}

/* Use a clamped gap so spacing grows but never exceeds a max value */
nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between; /* keep items distributed across the nav block */
	gap: clamp(12px, 2vw, 40px); /* prevents gaps from becoming too large */
	width: 100%;
	max-width: 100%;
	overflow: visible;
	margin: 0;
	padding: 0;
}

/* Override for mobile nav to be vertical */
nav ul li {
	position: relative;
	overflow: visible;
	flex: 0 1 auto; /* keep natural width but allow shrinking */
	min-width: 0; /* allow the item to shrink when necessary */
	text-align: center;
}

nav ul li a {
	color: var(--text-color);
	font-weight: 600;
	font-size: 1.05rem;
	padding: 10px 12px;
	border-radius: var(--border-radius-small);
	transition: var(--transition);
	position: relative;
	display: inline-block;
	white-space: nowrap; /* keep single line labels */
}

nav ul li a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(237, 28, 36, 0.1);
	border-radius: var(--border-radius-small);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
	z-index: -1;
}

nav ul li a:hover {
	color: var(--primary-color);
	transform: translateY(-2px);
}

nav ul li a:hover::before {
	transform: scaleX(1);
}

.contact-info {
	font-weight: 700;
	color: var(--primary-color);
	font-size: 1.1rem;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	background: linear-gradient(135deg, rgba(237, 28, 36, 0.1), rgba(237, 28, 36, 0.05));
	border-radius: var(--border-radius-small);
	border: 1px solid rgba(237, 28, 36, 0.2);
	transition: var(--transition);
}

.contact-info:hover {
	background: linear-gradient(135deg, rgba(237, 28, 36, 0.15), rgba(237, 28, 36, 0.1));
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(237, 28, 36, 0.2);
}

.contact-info i {
	font-size: 1.2rem;
}

/* In the header we want the phone control to be icon-like and not an emphasized rectangle */
header .contact-info {
	padding: 0; /* remove header padding that created a square background */
	background: transparent;
	border: none;
	border-radius: 0;
	font-weight: 600;
	color: var(--text-color);
}
header .contact-info:hover { transform: none; box-shadow: none; }
header .contact-info .phone-link { margin-right: 0; }

/* Force the header phone link to use the nav-button visual even when .contact-info elsewhere styles it */
header .contact-info .phone-link.nav-button {
	background: var(--card-bg) !important;
	border: 1px solid rgba(0,0,0,0.06) !important;
	box-shadow: var(--card-shadow) !important;
	width: var(--nav-btn-size, 52px) !important;
	height: var(--nav-btn-size, 52px) !important;
	border-radius: 50% !important;
	padding: 0 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}
header .contact-info .phone-link.nav-button .phone-text { display: none; max-width: 110px; }
/* when JS determines there's room, show the text */
header .contact-info .phone-link.nav-button.phone-expanded .phone-text { display: inline-block; }

.phone-link {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 600;
	transition: var(--transition);
}

.phone-link:hover {
	color: var(--primary-light);
	text-decoration: underline;
}

/* Header phone link styling */
.contact-info .phone-link {
	color: inherit;
	text-decoration: none;
}

.contact-info .phone-link:hover {
	color: var(--primary-light);
}

/* Hero Section */
.hero {
    /* NEW HERO IMAGE - Optimized WebP */
    background: url('../assets/images/hero_bg_new.webp') no-repeat center center;
    background-size: cover;
    
    /* Ensure text readability */
    color: white;
    
	padding: clamp(60px, 8vh, 90px) 0 clamp(32px, 6vh, 64px); /* Scale spacing with viewport to avoid huge gaps */
	margin-top: 85px;
	position: relative; /* Changed back to relative */
	width: 100%;
	min-height: clamp(520px, 80vh, 900px); /* Prevent extreme heights on very tall screens */
	z-index: 1; /* Normal stacking */
	overflow: visible; /* Allow content to show */
}

/* Add a dark overlay to ensuring text pops against the image */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Gradient: Darker on left for text, brighter on right */
    /* Much faster fade-out to brightness */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 35%, rgba(0,0,0,0) 60%);
    z-index: -1;
}

@keyframes floatingBubbles {
	0%, 100% { transform: translateY(0) scale(1); }
	33% { transform: translateY(-20px) scale(1.1); }
	66% { transform: translateY(10px) scale(0.9); }
}

.hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.03) 50%, transparent 70%),
		linear-gradient(-45deg, transparent 30%, rgba(255, 255, 255, 0.02) 50%, transparent 70%);
	animation: none; /* disable shimmer animation */
	pointer-events: none;
}

/* Light mode: Specific hero image - Optimized WebP */
body:not([data-theme="dark"]) .hero {
	background: url('../assets/images/hero_bg_light.webp') no-repeat center center;
    background-size: cover;
	color: #ffffff;
}

/* Disable overlay in light mode so it doesn't get darker */
body:not([data-theme="dark"]) .hero::before {
	display: none;
}

body:not([data-theme="dark"]) .hero::after {
	display: none;
}

@keyframes shimmer {
	0%, 100% { transform: translateX(-100%); }
	50% { transform: translateX(100%); }
}

[data-theme="dark"] .hero {
	/* Ensure image persists in dark mode - Optimized WebP */
    background: url('../assets/images/hero_bg_new.webp') no-repeat center center;
    background-size: cover;
}

.hero .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4rem;
	position: relative; /* Changed back to relative for scrolling */
	z-index: 1;
	width: 100%;
	max-width: 1200px;
	padding: 0 20px;
}

.hero-content {
	flex: 1;
	max-width: 55%;
	animation: slideInLeft 1s ease-out;
}

/* Mobile: left-align hero content & shift background for centered character */
@media (max-width: 768px) {
	.hero {
		/* Shift background so the devil character appears more centered */
		background-position: 60% center;
		padding: clamp(40px, 6vh, 70px) 0 clamp(24px, 4vh, 48px);
		min-height: clamp(480px, 75vh, 750px);
	}
	
	/* Light mode mobile background position */
	body:not([data-theme="dark"]) .hero {
		background-position: 60% center;
	}
	
	/* Dark mode mobile background position */
	[data-theme="dark"] .hero {
		background-position: 60% center;
	}
	
	.hero .container {
		padding: 0 16px;
		justify-content: flex-start;
	}
	
	.hero-content {
		max-width: 58%;
		text-align: left;
		padding-right: 0;
		margin-right: auto;
	}
	
	.hero h1 {
		text-align: left;
		font-size: clamp(1.6rem, 6vw, 2.2rem);
		margin-bottom: 1rem;
	}
	
	.hero p {
		text-align: left;
		font-size: 0.95rem;
		margin-bottom: 1.5rem;
		line-height: 1.5;
	}
	
	/* Bigger, more touch-friendly button on mobile */
	.hero .btn-primary {
		font-size: 1rem;
		padding: 16px 28px;
		min-height: 52px;
		border-radius: 8px;
	}
	
	.hero-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}
	
	.hero-certificates {
		gap: 0.75rem;
	}
	
	.hero-cert-img {
		height: 45px;
	}
}

@keyframes slideInLeft {
	from {
		opacity: 0;
		transform: translateX(-50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.hero h1 {
	font-size: clamp(2.5rem, 5vw, 4.5rem);
    margin-bottom: 2rem;
	line-height: 1.1;
	color: white;
	font-weight: 800;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body:not([data-theme="dark"]) .hero h1 {
    color: #0a0a0a; /* Almost black for maximum contrast */
    text-shadow: 0 2px 10px rgba(0,0,0,0.15); /* Soft but visible drop shadow */
}

.hero p {
	font-size: 1.3rem;
	margin-bottom: 2.5rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
	font-weight: 400;
}

body:not([data-theme="dark"]) .hero p {
    color: #1a1a1a; /* Very dark grey */
    font-weight: 600; /* Extra weight */
    text-shadow: 0 1px 5px rgba(0,0,0,0.1); /* Text shadow for legibility */
}

.hero .btn-primary {
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	font-size: 1.2rem;
	padding: 18px 36px;
	margin-top: 0; /* Removed margin to align with certificates */
	color: white;
	font-weight: 600;
	position: relative;
	overflow: hidden;
}

/* Hero-style button for forms (match hero CTA) */
.btn-primary.btn-primary--hero {
	background: rgba(255, 255, 255, 0.15);
	border: 2px solid rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(10px);
	font-size: 1.2rem;
	padding: 18px 36px;
	color: #fff;
	font-weight: 600;
	position: relative;
	overflow: hidden;
}

/* Removed redundant light mode overrides */
body:not([data-theme="dark"]) .hero .btn-primary {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
	color: #fff;
	border: none;
	backdrop-filter: none;
}
body:not([data-theme="dark"]) .btn-primary.btn-primary--hero {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
	color: #fff;
	border: none;
	backdrop-filter: none;
}
body:not([data-theme="dark"]) .hero .btn-primary::before {
	background: rgba(255, 255, 255, 0.2);
}
body:not([data-theme="dark"]) .btn-primary.btn-primary--hero::before {
	background: rgba(255, 255, 255, 0.2);
}
body:not([data-theme="dark"]) .hero .btn-primary:hover {
	box-shadow: 0 10px 30px rgba(237, 28, 36, 0.3);
}
body:not([data-theme="dark"]) .btn-primary.btn-primary--hero:hover {
	box-shadow: 0 10px 30px rgba(237, 28, 36, 0.3);
}

.hero .btn-primary::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.1);
	transform: translateX(-100%);
	transition: transform 0.3s ease;
}

.hero .btn-primary:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.5);
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.hero .btn-primary:hover::before {
	transform: translateX(0);
}

.hero-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.hero-certificates {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.cert-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    outline: none; /* Remove default focus outline */
    -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
    text-decoration: none;
}

.cert-wrapper:focus {
    outline: none;
}

.cert-icon {
    position: relative;
    display: block;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
    transition: filter 0.4s ease;
}

.hero-cert-img {
    height: 70px;
    width: auto;
    display: block;
}

/* Shine Effect */
.cert-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Slanted shine gradient - narrower for better visibility control */
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0) 40%,
        rgba(255,255,255,0.8) 50%,
        rgba(255,255,255,0) 60%
    );
    background-size: 200% 100%;
    background-position: 200% 0;
    background-repeat: no-repeat;
    
    /* Sync with transform transition, smooth curve for shine */
    transition: background-position 0.4s ease-out;
    
    pointer-events: none;
    
    /* Masking to the image shape */
    -webkit-mask-image: var(--cert-mask);
    mask-image: var(--cert-mask);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.cert-wrapper:hover {
    transform: translateY(-8px) scale(1.05);
    z-index: 10;
}

.cert-wrapper:hover .cert-icon {
    filter: drop-shadow(0 15px 15px rgba(0,0,0,0.4));
}

.cert-wrapper:hover .cert-icon::after {
    background-position: -100% 0;
}

.cert-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
    line-height: 1.3;
    max-width: 120px;
    margin-top: 6px;
    opacity: 0;
    transform: translateY(-5px);
    transition: all 0.3s ease;
    /* When hidden, remove from flow so it doesn't affect vertical alignment */
    position: absolute;
    top: 100%;
}

[data-theme="dark"] .cert-text {
    color: #ffffff;
}

.cert-wrapper:hover .cert-text {
    opacity: 1;
    transform: translateY(0);
    color: #000000;
}

[data-theme="dark"] .cert-wrapper:hover .cert-text {
    color: #ffffff;
}

/* Always visible modifier */
.hero-certificates.iso-always-visible .cert-text {
    opacity: 1;
    transform: translateY(0);
    position: static; /* Restore to flow when always visible */
    color: #1a1a1a;
}

[data-theme="dark"] .hero-certificates.iso-always-visible .cert-text {
    color: #ffffff;
}

.hero-certificates.iso-always-visible .cert-wrapper:hover .cert-text {
    color: #000000;
}

[data-theme="dark"] .hero-certificates.iso-always-visible .cert-wrapper:hover .cert-text {
    color: #ffffff;
}

.hero-image {
	flex: 1;
	text-align: center;
	animation: slideInRight 1s ease-out;
}

@keyframes slideInRight {
	from {
		opacity: 0;
		transform: translateX(50px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.hero-image img {
	max-width: 100%;
	height: auto;
	border-radius: 0 !important; /* remove rounded corners for transparent bg */
	box-shadow: none !important; /* remove drop shadow */
	transition: var(--transition);
	filter: none; /* keep original image colors without added brightness */
}

.hero-image img:hover {
	transform: none; /* no hover transform for a clean image */
}

/* ============================================
   HERO IMAGE-RIGHT LAYOUT VARIANT
   When admin selects "image-right" layout
   ============================================ */
.hero.hero--image-right {
	/* Remove the character background for this layout */
	background: linear-gradient(135deg, var(--background-color) 0%, var(--card-color) 100%);
}

.hero.hero--image-right::before {
	/* Subtle gradient overlay for depth */
	background: linear-gradient(90deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0) 50%);
}

body:not([data-theme="dark"]) .hero.hero--image-right {
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f5 100%);
}

[data-theme="dark"] .hero.hero--image-right {
	background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0d0d0d 100%);
}

.hero.hero--image-right .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 3rem;
}

.hero.hero--image-right .hero-content {
	flex: 1;
	max-width: 55%;
}

.hero.hero--image-right .hero-image {
	flex: 0 0 40%;
	max-width: 450px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hero.hero--image-right .hero-image img {
	max-width: 100%;
	max-height: 500px;
	height: auto;
	object-fit: contain;
	filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
}

/* Dark mode adjustments for image-right layout */
[data-theme="dark"] .hero.hero--image-right .hero-image img {
	filter: drop-shadow(0 20px 60px rgba(237, 28, 36, 0.2));
}

/* Text colors for image-right layout */
.hero.hero--image-right h1 {
	color: var(--text-color);
}

.hero.hero--image-right p {
	color: var(--text-color);
	opacity: 0.85;
}

body:not([data-theme="dark"]) .hero.hero--image-right h1 {
	color: #1a1a1a;
	text-shadow: none;
}

body:not([data-theme="dark"]) .hero.hero--image-right p {
	color: #333;
	font-weight: 500;
	text-shadow: none;
}

/* Button styling for image-right layout (use solid primary button) */
.hero.hero--image-right .btn-primary {
	background: linear-gradient(135deg, var(--primary-color) 0%, #c41a20 100%);
	border: none;
	backdrop-filter: none;
	color: #fff;
	box-shadow: 0 4px 15px rgba(237, 28, 36, 0.3);
}

.hero.hero--image-right .btn-primary:hover {
	background: linear-gradient(135deg, #c41a20 0%, var(--primary-color) 100%);
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(237, 28, 36, 0.4);
}

/* Mobile responsive for image-right layout */
@media (max-width: 768px) {
	.hero.hero--image-right .container {
		flex-direction: column;
		gap: 2rem;
		text-align: center;
	}
	
	.hero.hero--image-right .hero-content {
		max-width: 100%;
		order: 1;
	}
	
	.hero.hero--image-right .hero-image {
		flex: 0 0 auto;
		max-width: 280px;
		order: 2;
	}
	
	.hero.hero--image-right .hero-image img {
		max-height: 300px;
	}
	
	.hero.hero--image-right h1,
	.hero.hero--image-right p {
		text-align: center;
	}
	
	.hero.hero--image-right .hero-actions {
		justify-content: center;
	}
	
	.hero.hero--image-right .hero-certificates {
		justify-content: center;
	}
}

/* Services Section */
.services {
	padding: 40px 0 32px 0;
	background: var(--background-gradient);
	background-attachment: fixed;
	position: relative;
	margin-top: 0; /* Reset margin since hero no longer takes full height */
	overflow: visible; /* avoid creating an inner scroll context */
}

.services::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		var(--background-pattern),
		radial-gradient(ellipse at 20% 80%, rgba(237, 28, 36, 0.04) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(237, 28, 36, 0.04) 0%, transparent 50%);
	pointer-events: none;
}

[data-theme="dark"] .services::before {
	background: 
		var(--background-pattern),
		radial-gradient(ellipse at 20% 80%, rgba(237, 28, 36, 0.08) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(237, 28, 36, 0.06) 0%, transparent 50%);
}

.services .container {
	position: relative;
	z-index: 1;
}

.services h2 {
	text-align: center;
	margin-bottom: 2rem;
	color: var(--text-color);
	position: relative;
}

.services h2::after {
	left: 50%;
	transform: translateX(-50%);
}

/* Skeleton loading cards for instant visual feedback */
.skeleton-card {
	background: var(--card-bg, #fff);
	border-radius: 16px;
	padding: 1rem;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-image {
	width: 100%;
	height: 160px;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.5s ease-in-out infinite;
	border-radius: 12px;
}

.skeleton-text {
	height: 1.2rem;
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.5s ease-in-out infinite;
	border-radius: 4px;
	width: 80%;
}

.skeleton-text.short {
	width: 50%;
}

@keyframes skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

[data-theme="dark"] .skeleton-card {
	background: var(--card-bg, #1e1e1e);
}

[data-theme="dark"] .skeleton-image,
[data-theme="dark"] .skeleton-text {
	background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.5s ease-in-out infinite;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* smaller cards, more columns */
	gap: 1.25rem; /* tighter gap to fit more */
	padding: 0;
	margin: 2rem 0 0;
	overflow: visible; /* prevent internal scrollbars */
	width: 100%;
	box-sizing: border-box;
}

/* Mobile layout: horizontal snap scroller */
@media (max-width: 767px) {
	.services-grid {
		display: flex !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		overflow-y: visible !important;
		-webkit-overflow-scrolling: touch !important;
		scroll-snap-type: x mandatory !important;
		gap: 1rem !important;
		padding: 1.5rem calc((100vw - 280px) / 2) !important;
		margin: 1rem 0 0 !important;
		scrollbar-width: none !important; /* Firefox */
		-ms-overflow-style: none !important; /* IE/Edge */
		touch-action: pan-x pan-y !important;
		overscroll-behavior-x: contain !important;
		align-items: stretch !important;
	}
	
	.services-grid::-webkit-scrollbar {
		display: none !important; /* Chrome/Safari */
	}
	
	/* Make cards properly sized for mobile viewing */
	.service-item {
		flex-shrink: 0 !important;
		width: 280px !important;
		min-width: 280px !important;
		max-width: 280px !important;
		box-sizing: border-box !important;
		scroll-snap-align: center !important;
		flex: 0 0 auto !important;
		min-height: 340px !important;
		padding: 1.5rem 1.25rem !important;
	}
}

.services-grid::-webkit-scrollbar {
	display: none;
}

.service-item {
	background: var(--glass-bg-strong, rgba(255, 255, 255, 0.9));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	padding: 1rem; /* smaller card padding */
	border-radius: var(--border-radius);
	text-align: center;
	transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
				box-shadow 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
				background 0.75s cubic-bezier(0.22, 0.61, 0.36, 1),
				border-color 0.75s cubic-bezier(0.22, 0.61, 0.36, 1);
	box-shadow: var(--card-shadow);
	border: 1px solid var(--card-border, rgba(237, 28, 36, 0.08));
	position: relative;
	overflow: visible; /* Changed from hidden to visible so aktion badges show */
	flex: initial; /* neutralize old flex sizing */
	scroll-snap-align: start;
	min-width: 0; /* allow grid item to shrink and not overflow */
	cursor: pointer;
	will-change: transform, box-shadow;
}

.service-item:focus-visible {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

.service-item .service-content {
	position: relative;
	z-index: 2;
	transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.45s ease;
	will-change: transform;
}

.service-item .service-text--long {
	display: none;
}

[data-theme="dark"] .service-item {
	background: var(--glass-bg, rgba(30, 30, 30, 0.7));
	border-color: rgba(163, 163, 163, 0.1);
}



.service-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
	transform: scaleX(0);
	transition: transform 0.18s cubic-bezier(0.4,0,0.2,1) 0s;
	border-radius: var(--border-radius) var(--border-radius) 0 0; /* Match card top corners */
}

.service-item:hover::before {
	transform: scaleX(1);
}

.service-item:hover {
	transform: translateY(-12px) scale(1.02);
	box-shadow: var(--card-shadow-hover);
	background: var(--glass-bg-strong, rgba(255, 255, 255, 0.95));
	border-color: rgba(237, 28, 36, 0.25);
}

[data-theme="dark"] .service-item:hover {
	background: rgba(237, 28, 36, 0.08);
	border-color: rgba(237, 28, 36, 0.35);
	box-shadow: 
		0 8px 24px rgba(0, 0, 0, 0.35),
		0 16px 48px rgba(237, 28, 36, 0.2),
		0 0 60px rgba(237, 28, 36, 0.15);
}

.service-item:nth-child(even):hover {
	transform: translateY(-10px) scale(1.02);
}

.service-item:nth-child(odd):hover {
	transform: translateY(-10px) scale(1.02);
}

.service-item img {
	width: 100%;
	height: auto; /* allow aspect-ratio rule to control height */
	object-fit: cover;
	border-radius: var(--border-radius-small);
	margin-bottom: 1.5rem;
	transition: var(--transition);
	filter: brightness(0.9) contrast(1.1);
}

.service-item:hover img {
	filter: brightness(1) contrast(1.2);
	transform: scale(1.05);
}

/* Service images diashow: stack images and show only the .active one */
.service-images {
	position: relative;
	width: 100%;
	height: 150px; /* match the image area used elsewhere */
	overflow: hidden; /* Keep hidden to properly mask images */
	border-radius: var(--border-radius-small);
	margin-bottom: 1rem;
}
.service-images img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.45s ease-in-out, transform 0.45s ease-in-out;
	border-radius: var(--border-radius-small);
	transform: translateY(6px) scale(1.02);
	transform-origin: center;
}
.service-images img.active {
	opacity: 1;
	z-index: 1;
	transform: translateY(0) scale(1.04);
}

/* Aktion badge - positioned relative to .service-item (not .service-images) */
.service-item .aktion-badge {
	position: absolute !important;
	top: 18px !important; /* Adjusted to be inside the image area visually */
	right: 18px !important;
	z-index: 100 !important; /* High z-index to be above everything */
}

.service-item h3 {
	margin-bottom: 1rem;
	color: var(--primary-color);
	font-size: 1.4rem;
	font-weight: 700;
	position: relative;
	transition: transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.45s ease;
	will-change: transform;
}

.service-item h3::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 2px;
	background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
	border-radius: 1px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.service-item:hover h3::after {
	opacity: 1;
}

.service-item p {
	color: var(--text-light);
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 0;
	transition: opacity 0.45s ease, transform 0.75s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.45s ease;
}

.service-item.is-expanded {
	overflow: hidden;
	min-height: 280px;
}

.service-item.is-expanded .service-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 220px;
	padding: 1.5rem;
}

.service-item.is-expanded .service-images {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border-radius: var(--border-radius);
	transition: none;
	z-index: 0;
	overflow: hidden;
}

.service-item.is-expanded .service-images img {
	position: absolute;
	top: -6%;
	left: -6%;
	width: 112%;
	height: 112%;
	min-width: 112%;
	min-height: 112%;
	object-fit: cover;
	transform: translateY(0) scale(1.06);
	filter: blur(8px) brightness(0.68) contrast(1.1) saturate(1.1);
	transition: filter 0.3s ease, transform 0.3s ease;
	opacity: 1;
	z-index: 0;
}

.service-item.is-expanded::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
	border-radius: var(--border-radius);
	z-index: 1;
	opacity: 0;
	animation: serviceOverlayFade 0.25s ease forwards;
	pointer-events: none;
}

.service-item.is-expanded .service-text--short {
	display: none;
}

.service-item.is-expanded .service-text--long {
	display: block;
	opacity: 0;
	transform: translateY(8px);
	animation: serviceTextIn 0.25s ease 0.05s forwards;
}

.service-item.is-expanded .service-content h3 {
	transform: translateY(-12px);
	color: #ffffff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.service-item.is-expanded .service-content p {
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Light mode expanded card enhancements */
body:not([data-theme="dark"]) .service-item.is-expanded {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
	border-color: rgba(237, 28, 36, 0.3);
}

body:not([data-theme="dark"]) .service-item.is-expanded::after {
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.85) 100%);
}

body:not([data-theme="dark"]) .service-item.is-expanded .service-images img {
	filter: blur(8px) brightness(1.15) contrast(0.9) saturate(0.85);
}

body:not([data-theme="dark"]) .service-item.is-expanded .service-content h3 {
	color: #1a1a1a;
	text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

body:not([data-theme="dark"]) .service-item.is-expanded .service-content p {
	color: rgba(30, 30, 30, 0.9);
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* Dark mode expanded card enhancements */
[data-theme="dark"] .service-item.is-expanded {
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 40px rgba(237, 28, 36, 0.15);
	border-color: rgba(237, 28, 36, 0.4);
}

[data-theme="dark"] .service-item.is-expanded::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.7) 100%);
}

[data-theme="dark"] .service-item.is-expanded .service-images img {
	filter: blur(8px) brightness(0.68) contrast(1.1) saturate(1.1);
}

[data-theme="dark"] .service-item.is-expanded .service-content h3 {
	color: #ffffff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}

[data-theme="dark"] .service-item.is-expanded .service-content p {
	color: rgba(255, 255, 255, 0.95);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

@keyframes serviceOverlayFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes serviceTextIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.service-item,
	.service-item * {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* About Section */
.about {
    padding: 32px 0 48px 0;
    background: linear-gradient(180deg, var(--background-color) 0%, var(--secondary-bg) 50%, var(--background-color) 100%);
    position: relative;
    margin-top: 0; /* Reset any inherited margins */
}

.about::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		var(--background-pattern),
		radial-gradient(ellipse at 80% 20%, rgba(237, 28, 36, 0.05) 0%, transparent 50%),
		radial-gradient(ellipse at 10% 80%, rgba(237, 28, 36, 0.03) 0%, transparent 40%);
	pointer-events: none;
}

[data-theme="dark"] .about::before {
	background: 
		var(--background-pattern),
		radial-gradient(ellipse at 80% 20%, rgba(237, 28, 36, 0.1) 0%, transparent 50%),
		radial-gradient(ellipse at 10% 80%, rgba(237, 28, 36, 0.06) 0%, transparent 40%);
}

.about .container {
	position: relative;
	z-index: 1;
}

.about-layout {
	display: grid;
	grid-template-columns: 1fr 3fr 1fr;
	gap: 3rem;
	align-items: center;
}

.about-content {
	text-align: center;
	padding: 0 1rem;
}

.about-content h2 {
	margin-bottom: 2rem;
}

.about-content p {
	font-size: 1.1rem;
	margin-bottom: 1.5rem;
	line-height: 1.8;
}

.about-image {
	position: relative;
	overflow: hidden;
	border-radius: var(--border-radius);
	box-shadow: var(--card-shadow);
	transition: var(--transition);
}

.about-image::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
	border-radius: var(--border-radius-lg);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
	opacity: 0;
	transition: var(--transition);
	filter: blur(20px);
	will-change: opacity, transform;
}

.about-image:hover {
	transform: translateY(-5px);
	box-shadow: var(--card-shadow-hover);
}

.about-image:hover::before {
	opacity: 0.3;
}

[data-theme="dark"] .about-image:hover::before {
	opacity: 0.4;
	filter: blur(25px);
}

.about-image:hover::before {
	opacity: 0.2;
}

.about-image img {
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: cover;
	border-radius: var(--border-radius);
	box-shadow: none;
	transition: var(--transition);
	display: block;
}

.about-image img:hover {
	transform: scale(1.03);
}

/* Mobile: stack text first, then images side by side */
@media (max-width: 968px) {
	.about-layout {
		grid-template-columns: 1fr 1fr;
		gap: 1rem;
	}

	.about-content {
		grid-column: 1 / -1;
		order: 1;
		text-align: center;
		padding: 0;
	}

	.about-image-left {
		order: 2;
	}

	.about-image-right {
		order: 3;
	}

	.about-image img {
		max-height: 300px;
	}
}

/* Extra small screens: stack all vertically */
@media (max-width: 480px) {
	.about-layout {
		gap: 1.5rem;
	}
	
	.about-image img {
		max-height: 300px;
	}
}

/* Contact Section */
.contact {
    padding: 48px 0 120px 0;
    background: var(--background-gradient);
    position: relative;
    margin-top: 0; /* Reset any inherited margins */
}

.contact::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		var(--background-pattern),
		radial-gradient(ellipse at 30% 70%, rgba(237, 28, 36, 0.04) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 30%, rgba(237, 28, 36, 0.03) 0%, transparent 40%);
	pointer-events: none;
}

[data-theme="dark"] .contact::before {
	background: 
		var(--background-pattern),
		radial-gradient(ellipse at 30% 70%, rgba(237, 28, 36, 0.1) 0%, transparent 50%),
		radial-gradient(ellipse at 70% 30%, rgba(237, 28, 36, 0.08) 0%, transparent 40%);
}

.contact .container {
	position: relative;
	z-index: 1;
}

.contact h2 {
	text-align: center;
	margin-bottom: 4rem;
	color: var(--text-color);
}

/* New 3-section contact layout */
.contact-section {
	background: var(--glass-bg-strong, rgba(255, 255, 255, 0.9));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: var(--border-radius);
	box-shadow: var(--card-shadow);
	border: 1px solid var(--card-border, rgba(237, 28, 36, 0.08));
	margin-bottom: 2rem;
	overflow: hidden;
	transition: var(--transition);
}

.contact-section:hover {
	box-shadow: var(--card-shadow-hover);
	transform: translateY(-4px);
	border-color: rgba(237, 28, 36, 0.15);
}

[data-theme="dark"] .contact-section {
	background: var(--glass-bg, rgba(30, 30, 30, 0.7));
	border-color: rgba(163, 163, 163, 0.1);
}

[data-theme="dark"] .contact-section:hover {
	box-shadow: 
		0 8px 24px rgba(0, 0, 0, 0.35),
		0 16px 48px rgba(237, 28, 36, 0.15),
		0 0 40px rgba(237, 28, 36, 0.1);
	border-color: rgba(237, 28, 36, 0.25);
}

.section-header {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 50%, var(--primary-color) 100%);
	background-size: 200% 100%;
	animation: gradientShimmer 8s ease infinite;
	color: white;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	position: relative;
	overflow: hidden;
}

.section-header::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(255, 255, 255, 0.05) 100%);
	pointer-events: none;
}

@keyframes gradientShimmer {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.section-header i {
	font-size: 1.5rem;
	opacity: 0.9;
}

.section-header h3 {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	color: white;
}

/* Contact Info Section */
.contact-info-section .contact-details {
	padding: 0.75rem; /* Further reduced padding */
}

/* Contact detail items spacing */
.detail-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem; /* Reduced from 1.5rem */
	padding-bottom: 1rem; /* Reduced from 1.5rem */
	border-bottom: 1px solid rgba(237, 28, 36, 0.1);
}

.detail-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

/* Ensure contact info shows all content on wide screens */
@media (min-width: 1440px) {
	.contact-info-section .contact-details {
		padding: 0.75rem; /* Further reduced padding */
		min-height: 160px; /* Further reduced min-height */
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	/* Reorder elements: Map on top, Contact info below */
	.contact-left-column .contact-info-section {
		order: 2;
	}

	.contact-left-column .contact-map-section {
		order: 1;
	}
}

.detail-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(237, 28, 36, 0.1);
}

.detail-item:last-child {
	border-bottom: none;
	margin-bottom: 0;
	padding-bottom: 0;
}

.detail-item i {
	color: var(--primary-color);
	font-size: 1.2rem;
	margin-top: 0.25rem;
	width: 20px;
	text-align: center;
}

.detail-item strong {
	color: var(--text-color);
	display: block;
	margin-bottom: 0rem; /* Remove all margin */
	line-height: 1; /* Reduce line height */
	font-weight: 600;
}

.detail-item div {
	line-height: 1.2; /* Reduce line height for content */
	margin-top: 0rem; /* Remove top margin */
}

.detail-item a {
	color: var(--primary-color);
	text-decoration: none;
	font-weight: 500;
	transition: var(--transition);
}

.detail-item a:hover {
	color: var(--primary-light);
	text-decoration: underline;
}

/* Contact Form Section */
.contact-form-section {
	min-height: auto;
}

.contact-form-section .contact-form {
	padding: 2rem;
}

.form-group {
	margin-bottom: 1.5rem;
}

.form-group label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--text-color);
	font-weight: 500;
	font-size: 0.95rem;
}

/* Checkbox and Radio Button Styles */
.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.5rem;
}

/* Service Checkbox Grid Layout */
.checkbox-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
    margin-top: 0.75rem;
}

/* Force 2 columns on larger screens too per user request to handle long text */
@media (min-width: 600px) {
    .checkbox-group {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Custom radio row with specific spacing */
.radio-row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem; /* tighter between the two groups */
	margin-top: 0.5rem;
}

.radio-section {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.section-label {
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--text-color);
	margin: 0;
}

.radio-group-compact {
	display: flex;
	gap: 0.2rem; /* even tighter within groups */
	align-items: center;
}

/* Fine-tune specific groups in the contact form */
/* Häufigkeit: slightly increase spacing between 1-malig and regelmäßig */
.contact-form .radio-row .radio-section:nth-of-type(1) .radio-group-compact {
	gap: 1.45rem; /* slightly more than before */
}
/* Auftraggeber: reduce spacing between privat and gewerblich */
/* Use last-of-type because the spacer div changes nth-of-type indexing */
.contact-form .radio-row .radio-section:last-of-type .radio-group-compact {
	gap: 1.45rem; /* matches Häufigkeit spacing */
}

.radio-group-compact .radio-label {
	margin-bottom: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	line-height: 1; /* unify line height */
	font-size: 0.9rem; /* lock font size for consistency */
	letter-spacing: 0; /* avoid extra tracking differences */
}

.radio-spacer {
	/* vertical separator when side-by-side: thin 1px gray line matching contact details */
	width: 1px;
	background: rgba(237, 28, 36, 0.1);
	margin: 0 1rem; /* horizontal gap around the line */
	align-self: stretch; /* make it as tall as the radio sections */
	flex-shrink: 0;
}

/* Reusable separator to match Kontaktinformationen section headers/bottom border */
.section-separator {
	width: 100%;
	height: 1px;
	background: rgba(237, 28, 36, 0.1);
	margin: 0.75rem 0 1rem 0;
}

/* Make the radio-row responsive: side-by-side on desktop, stacked on narrow screens and phone aspect ratios */
.radio-row {
	display: flex;
	align-items: stretch; /* ensure separator and sections stretch to same height */
	gap: 0.5rem; /* keep default */
}

/* Make each radio-section grow to use available horizontal space when side-by-side */
.radio-section {
	flex: 1 1 0;
	min-width: 0; /* allow proper shrinking in narrow containers */
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}

.radio-group-compact {
	display: flex;
	gap: 0.6rem; /* slightly larger gap so radios don't crowd */
	align-items: center;
	flex-wrap: wrap; /* allow wrapping if not enough horizontal space */
}

@media (max-width: 768px), (max-aspect-ratio: 9/16) {
	/* Stack radio sections vertically on smaller devices */
	.radio-row {
		flex-direction: column;
		gap: 0.5rem;
	}

	/* hide vertical separator on stacked layout */
	.radio-spacer { display: none; }

	/* Make each radio section full width and add separator line under the first
	   to visually separate similar to Kontaktinformationen's section header border */
	.radio-section {
		width: 100%;
	}

	/* add a separator after the first radio-section when stacked */
	.radio-section:first-of-type::after {
		content: '';
		display: block;
		height: 1px;
		background: rgba(237, 28, 36, 0.1);
		margin: 0.75rem 0 0.5rem 0;
	}
}

/* Form section headers */
.form-section {
	margin-bottom: 2rem;
}

.form-section-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--primary-color);
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 2px solid var(--primary-color);
	display: inline-block;
}

/* Dark mode for form section titles */
[data-theme="dark"] .form-section-title {
	color: var(--primary-light);
	border-bottom-color: var(--primary-light);
}

.checkbox-label, .radio-label {
	display: flex;
	align-items: flex-start;
	gap: 0.35rem; /* tighter label gap */
	cursor: pointer;
	font-weight: 400;
	font-size: 0.9rem;
	color: var(--text-light);
	margin-bottom: 0.25rem; /* tighter vertical spacing */
	min-width: 0; /* allow radios to sit closer */
	padding-inline: 0.1rem; /* normalize perceived spacing */
	flex-wrap: wrap;
}

.checkbox-label input[type="checkbox"],
.radio-label input[type="radio"] {
	width: 18px;
	height: 18px;
	accent-color: var(--primary-color);
	cursor: pointer;
	margin: 0; /* normalize default input margins */
	vertical-align: middle;
	flex: 0 0 auto; /* prevent flex-induced stretching */
	margin-top: 2px;
}

/* Wrapper for checkbox text to handle long service names */
.checkbox-text {
	display: inline;
	word-wrap: break-word;
	overflow-wrap: break-word;
	flex: 1;
	min-width: 0;
}

.checkbox-label:hover, .radio-label:hover {
	color: var(--text-color);
}

/* Form Row for side-by-side inputs */
.form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media (max-width: 768px) {
	.form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 14px 18px;
	border: 2px solid var(--input-border, rgba(163, 163, 163, 0.3));
	border-radius: var(--border-radius-small);
	background-color: var(--input-bg, #ffffff);
	color: var(--text-color);
	font-family: inherit;
	font-size: 1rem;
	transition: var(--transition);
	box-sizing: border-box;
	box-shadow: var(--shadow-inner, inset 0 2px 4px rgba(0, 0, 0, 0.04));
}

.contact-form input:hover,
.contact-form textarea:hover {
	border-color: rgba(237, 28, 36, 0.3);
	box-shadow: 
		var(--shadow-inner),
		0 0 0 3px rgba(237, 28, 36, 0.05);
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 
		var(--input-shadow-focus, 0 0 0 4px rgba(237, 28, 36, 0.1)),
		0 2px 8px rgba(237, 28, 36, 0.1);
}

[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
	background-color: var(--input-bg, rgba(30, 30, 30, 0.8));
	border-color: var(--input-border, rgba(163, 163, 163, 0.2));
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .contact-form input:hover,
[data-theme="dark"] .contact-form textarea:hover {
	border-color: rgba(237, 28, 36, 0.4);
	box-shadow: 
		inset 0 2px 4px rgba(0, 0, 0, 0.2),
		0 0 0 3px rgba(237, 28, 36, 0.1);
}

[data-theme="dark"] .contact-form input:focus,
[data-theme="dark"] .contact-form textarea:focus {
	border-color: var(--primary-light);
	box-shadow: 
		0 0 0 4px rgba(237, 28, 36, 0.2),
		0 2px 12px rgba(237, 28, 36, 0.15);
}

.contact-form textarea {
	height: 120px;
	resize: vertical;
	line-height: 1.5;
}

.contact-form .btn-primary {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

/* Form Tabs */
.form-tabs {
	display: flex;
	gap: 0;
	margin-bottom: 2rem;
	border-bottom: 2px solid #e0e0e0;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	overflow: hidden;
}

.form-tab-btn {
	flex: 1;
	padding: 1rem 1.5rem;
	background: var(--glass-bg, rgba(255, 255, 255, 0.5));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-light);
	transition: var(--transition);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-bottom: 3px solid transparent;
	position: relative;
	overflow: hidden;
}

.form-tab-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(237, 28, 36, 0.08) 0%, rgba(237, 28, 36, 0.02) 100%);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.form-tab-btn:hover {
	color: var(--primary-color);
}

.form-tab-btn:hover::before {
	opacity: 1;
}

.form-tab-btn.active {
	background: var(--glass-bg-strong, rgba(255, 255, 255, 0.9));
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
	box-shadow: 
		0 -2px 10px rgba(237, 28, 36, 0.1),
		inset 0 -2px 0 var(--primary-color);
}

[data-theme="dark"] .form-tab-btn {
	background: var(--glass-bg, rgba(30, 30, 30, 0.5));
}

[data-theme="dark"] .form-tab-btn.active {
	background: var(--glass-bg-strong, rgba(30, 30, 30, 0.9));
	box-shadow: 
		0 -2px 10px rgba(237, 28, 36, 0.2),
		0 0 20px rgba(237, 28, 36, 0.1),
		inset 0 -2px 0 var(--primary-light);
}

.form-tab-btn i {
	font-size: 1.1rem;
}

/* Form Containers */
.form-container {
	display: none;
	animation: fadeIn 0.3s ease-in-out;
}

.form-container.active {
	display: block;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.form-subtitle {
	color: var(--text-light);
	font-size: 1.05rem;
	margin-bottom: 2rem;
	line-height: 1.6;
	text-align: center;
	padding: 1rem;
	background: rgba(237, 28, 36, 0.05);
	border-radius: var(--border-radius);
}

/* Application Form Specific Styles */
.application-form select {
	width: 100%;
	padding: 0.85rem;
	border: 1px solid #ddd;
	border-radius: var(--border-radius-small);
	background: var(--input-bg, white);
	color: var(--text-color);
	font-size: 1rem;
	font-family: inherit;
	transition: var(--transition);
	cursor: pointer;
}

.application-form select:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(237, 28, 36, 0.1);
}

.application-form select option {
	padding: 0.5rem;
}

/* Checkbox Label for Privacy */
.application-form .checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	cursor: pointer;
	padding: 1rem;
	background: var(--accent-bg);
	border-radius: var(--border-radius-small);
	transition: var(--transition);
}

.application-form .checkbox-label:hover {
	background: rgba(237, 28, 36, 0.05);
}

.application-form .checkbox-label input[type="checkbox"] {
	margin-top: 0.2rem;
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: var(--primary-color);
}

.application-form .checkbox-label span {
	flex: 1;
	line-height: 1.5;
	color: var(--text-color);
}

/* Contact Form Success Message */
.contact-success-message {
	text-align: center;
	padding: 2rem 1rem;
	/* Removed background and border to avoid "canvas inside canvas" look */
	background: transparent;
	border: none;
	border-radius: 0;
	margin: 1rem 0;
	animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
	from {
		opacity: 0;
		transform: translateY(-20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.contact-success-message .success-icon {
	margin: 0 auto 1.5rem;
	width: 80px;
	height: 80px;
}

.contact-success-message .checkmark {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: block;
	stroke-width: 3;
	stroke: #22c55e;
	stroke-miterlimit: 10;
	animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
}

.contact-success-message .checkmark-circle {
	stroke-dasharray: 166;
	stroke-dashoffset: 166;
	stroke-width: 3;
	stroke-miterlimit: 10;
	stroke: #22c55e;
	fill: rgba(34, 197, 94, 0.1); /* Semi-transparent green instead of solid light green */
	animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.contact-success-message .checkmark-check {
	transform-origin: 50% 50%;
	stroke-dasharray: 48;
	stroke-dashoffset: 48;
	animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
	100% {
		stroke-dashoffset: 0;
	}
}

@keyframes scale {
	0%, 100% {
		transform: none;
	}
	50% {
		transform: scale3d(1.1, 1.1, 1);
	}
}

@keyframes fill {
	100% {
		box-shadow: inset 0 0 0 40px rgba(34, 197, 94, 0.2); /* Semi-transparent green fill */
	}
}

.contact-success-message h3 {
	color: #16a34a;
	font-size: 1.75rem;
	margin-bottom: 1rem;
	font-weight: 700;
}

.contact-success-message p {
	color: var(--text-color);
	font-size: 1.1rem;
	margin-bottom: 2rem;
	line-height: 1.6;
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}

.contact-success-message .success-reset-btn {
	background: var(--primary-color);
	color: white;
	border: none;
	padding: 0.875rem 2rem;
	font-size: 1rem;
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: all 0.3s ease;
	font-weight: 600;
	box-shadow: 0 4px 6px rgba(237, 28, 36, 0.2);
}

.contact-success-message .success-reset-btn:hover {
	background: var(--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(237, 28, 36, 0.3);
}

.contact-success-message .success-reset-btn:active {
	transform: translateY(0);
}


/* Map Section */
.contact-map-section .map-container {
	position: relative;
	height: 320px;
	overflow: hidden;
	border-radius: var(--border-radius);
	--map-cta-offset: 80px; /* Keep Google CTA hidden without showing a spacer */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
	-webkit-tap-highlight-color: transparent;
}

.contact-map-section .map-container iframe {
	position: absolute;
	top: calc(-1 * var(--map-cta-offset));
	left: 0;
	width: 100%;
	height: calc(100% + var(--map-cta-offset));
	border: 0;
	transition: var(--transition);
	pointer-events: auto;
	z-index: 1;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Make map expand over entire card on wider screens */
@media (min-width: 1440px) {
	.contact-map-section {
		padding: 0;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.contact-map-section .section-header {
		margin: 0;
		padding: 1.5rem;
		border-radius: var(--border-radius) var(--border-radius) 0 0;
		flex-shrink: 0;
	}

	.contact-map-section .map-container {
		flex: 1;
		height: calc(100% - 80px); /* Account for header height */
		min-height: 320px;
		margin: 0;
		border-radius: 0 0 var(--border-radius) var(--border-radius);
		overflow: hidden;
		--map-cta-offset: 120px;
	}

	.contact-map-section .map-container iframe {
		border-radius: 0 0 var(--border-radius) var(--border-radius);
	}

	.map-overlay {
		position: absolute;
		bottom: 15px;
		right: 15px;
		z-index: 10;
		top: auto;
		left: auto;
		pointer-events: auto;
	}
}

.map-overlay {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	pointer-events: auto; /* Ensure overlay interaction works */
	width: auto;
	height: auto;
	max-width: 200px; /* Limit overlay size */
	max-height: 40px; /* Limit overlay size */
}
	transition: filter 0.9s ease, transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
.map-link {
	background: rgba(255, 255, 255, 0.9);
	color: var(--primary-color);
	padding: 8px 12px;
	border-radius: 20px;
	text-decoration: none;
	font-size: 0.85rem;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	backdrop-filter: blur(10px);
	transition: var(--transition);
}

.map-link:hover {
	background: white;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Dark mode styles for map section */
[data-theme="dark"] .contact-map-section {
	background: var(--card-bg);
	border-color: rgba(237, 28, 36, 0.2);
}

[data-theme="dark"] .contact-map-section .section-header {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
	color: white;
}

[data-theme="dark"] .contact-map-section .section-header h3 {
	color: white;
}

[data-theme="dark"] .map-link {
	background: rgba(42, 42, 42, 0.9);
	color: var(--primary-light);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .map-link:hover {
	background: rgba(42, 42, 42, 1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Dark mode styling for Google Maps iframe */
[data-theme="dark"] .contact-map-section iframe {
	filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(1.2);
	border-radius: var(--border-radius);
}

/* Footer */
footer {
	background: var(--footer-bg);
	color: white;
	padding: 40px 0 24px;
	position: relative;
	overflow: hidden;
	min-height: 140px; /* ensure footer occupies reasonable vertical space */
}

footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--primary-color), var(--primary-light), var(--primary-color));
	background-size: 200% 100%;
	animation: gradientMove 3s ease-in-out infinite;
}

footer::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: 
		radial-gradient(ellipse at 20% 100%, rgba(237, 28, 36, 0.15) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 0%, rgba(237, 28, 36, 0.1) 0%, transparent 50%);
	pointer-events: none;
}

@keyframes gradientMove {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.footer-content {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 2rem;
	gap: 2rem;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.footer-logo {
	position: relative;
	flex: 0 0 auto;
}

.footer-logo img {
	height: 60px;
	transition: var(--transition-bounce);
	filter: brightness(1.1) drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.footer-logo:hover img {
	transform: scale(1.08) translateY(-2px);
	filter: brightness(1.3) drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
}

.footer-links {
	display: flex;
	gap: 1rem 1.5rem;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	flex: 1 1 auto;
	position: relative;
	z-index: 1;
}

.footer-links a {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	padding: 8px 16px;
	border-radius: var(--border-radius-small);
	transition: var(--transition);
	position: relative;
	overflow: hidden;
	white-space: nowrap;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border: 1px solid transparent;
}

.footer-links a::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.5s;
}

.footer-links a:hover {
	color: white;
	background: rgba(237, 28, 36, 0.25);
	border-color: rgba(237, 28, 36, 0.4);
	transform: translateY(-3px);
	box-shadow: 
		0 4px 12px rgba(237, 28, 36, 0.3),
		0 0 20px rgba(237, 28, 36, 0.15);
}

.footer-links a:hover::before {
	left: 100%;
}

.back-to-top {
	position: relative;
}

.back-to-top a {
	color: rgba(255, 255, 255, 0.9);
	font-size: 24px;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(237, 28, 36, 0.2);
	border-radius: 50%;
	transition: var(--transition-bounce);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.1);
}

.back-to-top a:hover {
	color: white;
	background: var(--primary-color);
	transform: translateY(-8px) scale(1.15);
	box-shadow: 
		0 8px 20px rgba(237, 28, 36, 0.4),
		0 16px 40px rgba(237, 28, 36, 0.2),
		0 0 40px rgba(237, 28, 36, 0.3);
	border-color: transparent;
}

footer p {
	text-align: center;
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.7);
	position: relative;
	z-index: 1;
	font-size: 0.9rem;
}

/* Mobile: stack footer vertically and center everything */
@media (max-width: 768px) {
	.footer-content {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 2rem;
	}
	
	.footer-logo {
		order: 1;
	}
	
	.footer-logo img {
		max-width: 150px;
		height: auto;
	}
	
	.footer-links {
		order: 2;
		justify-content: center;
		gap: 0.75rem 1rem;
		flex-wrap: wrap;
	}
	
	.footer-links a {
		padding: 8px 12px;
		font-size: 0.95rem;
	}
	
	footer p {
		font-size: 0.85rem;
		padding-top: 1.25rem;
	}
}

/* Responsive Design */
@media (max-width: 1024px) {
	.services-grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
	}
    
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
}

/* Mobile/tablet mode (screens ≤900px) */
@media (max-width: 900px) {
	.container {
		padding: 0 12px;
	}

	header {
		padding: 6px 0;
	}

	header .container {
		padding: 6px 12px;
		gap: 6px;
		/* When desktop nav is hidden, use 2-column grid with logo left, actions right */
		grid-template-columns: auto 1fr;
		justify-content: space-between;
		align-items: center;
	}

	.logo img {
		height: 42px;
	}

	/* Hide desktop navigation on mobile */
	.desktop-nav {
		display: none;
	}

	/* Show mobile menu toggle only when desktop nav is hidden */
	#mobile-menu-toggle {
		display: flex !important;
	}

	/* Ensure theme toggle and language selector remain visible in portrait mobile */
	.theme-toggle { display: inline-flex; }
	.phone-toggle { display: inline-flex; }
	.lang-select-wrapper { display: inline-flex; }

	.header-actions {
		gap: 6px;
		justify-content: flex-end;
		flex-wrap: nowrap;
		overflow: visible;
	}

	/* Reduce button sizes on mobile for better fit */
	.nav-button, .nav-btn {
		--nav-btn-size: 38px !important;
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		min-height: 38px !important;
		font-size: 16px;
		padding: 0;
		margin: 0;
	}

	.nav-button i, .nav-btn i {
		font-size: 16px;
	}

	.lang-select {
		--lang-size: 38px !important;
		width: 38px !important;
		height: 38px !important;
		min-width: 38px !important;
		font-size: 22px;
	}

	.lang-display {
		font-size: 22px;
		width: 38px;
		height: 38px;
	}

	.theme-toggle {
		width: 38px !important;
		height: 38px !important;
		font-size: 16px;
		padding: 0;
	}

	.mobile-menu-toggle {
		width: 38px !important;
		height: 38px !important;
		font-size: 16px;
		padding: 0;
	}

	/* Portrait contact layout - ensure proper spacing */
	.contact-section {
		margin-bottom: 1.5rem; /* Increased spacing between sections */
	}

	/* Ensure proper spacing in contact grid on mobile */
	.contact-grid {
		gap: 1.5rem; /* Increased gap between contact sections */
		display: flex;
		flex-direction: column;
	}

	/* Ensure contact-left-column has proper spacing */
	.contact-left-column {
		margin-bottom: 1.5rem; /* Space between left column and form */
		gap: 1.5rem;
	}

	.contact-left-column .contact-section {
		margin-bottom: 0; /* Remove bottom margin within left column since gap handles it */
	}

	.contact-info-section,
	.contact-form-section {
		width: 100%;
	}

	.contact-map-section {
		width: 100%;
		margin-bottom: 0;
	}

	.contact-map-section .map-container {
		height: 250px;
		--map-cta-offset: 60px;
	}
	
	/* Better form input spacing and sizing */
	.contact-form input,
	.contact-form textarea,
	.contact-form select {
		padding: 14px 16px;
		font-size: 16px; /* Prevent iOS zoom on focus */
		border-radius: 8px;
	}
	
	.contact-form textarea {
		min-height: 120px;
	}
	
	.form-group {
		margin-bottom: 1rem;
	}
	
	/* Improve checkbox and radio button touch targets */
	.checkbox-label,
	.radio-label {
		padding: 8px 4px;
		min-height: 44px;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	
	.checkbox-label input[type="checkbox"],
	.radio-label input[type="radio"] {
		width: 20px;
		height: 20px;
		min-width: 20px;
		min-height: 20px;
		margin-top: 2px;
		flex-shrink: 0;
	}

	/* Ensure text wraps properly around badge */
	.checkbox-text {
		flex: 1;
		min-width: 0;
		word-wrap: break-word;
		overflow-wrap: break-word;
	}
	
	/* Stack form rows on mobile */
	.form-row {
		display: flex;
		flex-direction: column;
		gap: 0;
	}
}

/* Phone info: show icon on all sizes, hide textual number on narrow/portrait to save space */
.contact-info {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* By default hide the textual part inside .phone-link on small/tall viewports */
.contact-info .phone-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* On wide screens show full phone link text */
@media (min-width: 1024px) {
	.contact-info .phone-link { display: inline-flex; }
}

/* On narrow screens or portrait tall aspect, hide text but keep icon visible
   Use aspect-ratio to detect tall devices (portrait) and max-width fallback */
@media (max-width: 480px), (max-width: 768px) and (orientation: portrait), (max-aspect-ratio: 9/16) {
	.contact-info .phone-link {
		/* visually hide textual nodes but keep accessible name for screen readers */
		color: transparent;
	}
	.contact-info .phone-link i { color: inherit; }
	/* if phone-link contains a span with the text, hide it while keeping icon */
	.contact-info .phone-link span { display: none !important; }
}

/* When JS toggles compact mode because the phone text wraps to >2 lines */
.contact-info.phone-compact .phone-link { color: inherit; }
.contact-info.phone-compact .phone-link .phone-text { display: none !important; }
.contact-info.phone-compact .phone-link i { font-size: 1.2rem; }

/* Tighter icon-only appearance for compact phone mode */
.contact-info.phone-compact {
	padding: 4px;
	border-radius: 999px;
	background: transparent; /* keep it subtle on small screens */
}
.contact-info.phone-compact .phone-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
}

/* Landscape mode (mobile phones in landscape, tablets) */
@media (max-width: 1024px) and (orientation: landscape) {
	.container {
		padding: 0 20px;
	}

	header {
		padding: 10px 0;
	}

	header .container {
		padding: 10px 20px;
		gap: 12px;
	}

	.logo img {
		height: 50px;
	}

	/* Show desktop navigation in landscape */
	/* Removed: desktop-nav display block since it's now hidden on all ≤900px */

	/* Reduce navigation spacing on landscape */
	nav ul {
		gap: 1.5rem;
	}

	nav ul li a {
		padding: 8px 12px;
		font-size: 1rem;
	}

	.header-actions {
		gap: 12px;
	}

	/* Show phone number in landscape mode */
	.contact-info {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 0.9rem;
		padding: 8px 12px;
		border-radius: 15px;
		background: rgba(237, 28, 36, 0.1);
		border: 1px solid rgba(237, 28, 36, 0.2);
	}

	.contact-info i {
		font-size: 1rem;
	}

	.theme-toggle {
		width: 36px;
		height: 36px;
		font-size: 14px;
		padding: 8px;
	}

	/* Landscape contact layout - side by side */
	.contact-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		margin-bottom: 2rem;
	}

	.contact-info-section,
	.contact-form-section {
		width: 100%;
		margin-bottom: 0;
	}

	.contact-map-section {
		grid-column: 1 / -1;
		width: 100%;
	}

	.contact-map-section .map-container {
		height: 300px;
		--map-cta-offset: 70px;
	}
}

/* Landscape and square mode (wider than tall or square) */
@media (min-aspect-ratio: 1/1) {
	.container {
		max-width: 1400px;
	}

	/* Hide hamburger menu on tablet and wider screens (desktop nav visible) */
	.mobile-menu-toggle {
		display: none !important;
	}

	/* Hide mobile navigation dropdown when hamburger is hidden */

	/* Reduce navigation spacing on wider screens */
	nav ul {
		gap: 0.5rem;
	}

	nav ul li a {
		padding: 8px 10px;
		font-size: 0.95rem;
	}
}

/* Very wide screens - spread navigation more */
@media (min-width: 1200px) {
	nav ul {
		gap: 2rem;
	}

	nav ul li a {
		padding: 10px 16px;
		font-size: 1rem;
	}
}

/* Contact left column for stacking contact info and map */
.contact-left-column {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Very wide screens */
@media (min-width: 1440px) {
	/* Left column: contact info + map stacked, Right column: contact form */
	.contact-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2rem;
		margin-bottom: 2rem;
	}

	.contact-left-column {
		display: flex;
		flex-direction: column;
		gap: 2rem;
	}

	.contact-left-column .contact-info-section {
		flex: 0 0 auto;
		min-height: fit-content;
	}

	.contact-left-column .contact-map-section {
		flex: 1;
	}

	.contact-form-section {
		height: fit-content;
	}

	.contact-map-section .map-container {
		height: calc(100% - 80px);
		min-height: 320px;
		--map-cta-offset: 120px;
	}
}

/* Very wide screens (4K and above) */
@media (min-width: 2560px) {
	.container {
		max-width: 2000px;
	}

	.contact-grid {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}

	.contact-map-section .map-container {
		height: 500px;
		--map-cta-offset: 140px;
	}
}


@media (max-width: 480px) {
	.hero {
		padding: 80px 0 50px;
		margin-top: 85px;
		min-height: auto;
	}

	.hero .container {
		padding: 0 4px 0 16px;
		justify-content: flex-start;
	}

	.hero-content {
		max-width: 58%;
		padding-left: 8px;
	}

	.hero h1 {
		font-size: clamp(1.75rem, 8vw, 2.2rem);
		margin-bottom: 1.2rem;
		line-height: 1.15;
	}

	.hero p {
		font-size: 1rem;
		margin-bottom: 1.5rem;
		line-height: 1.6;
	}

	.hero .btn-primary {
		padding: 14px 26px;
		font-size: 1rem;
		width: auto;
		max-width: 100%;
	}

	.hero-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
		width: 100%;
	}

	.hero-certificates {
		justify-content: flex-start;
		gap: 1.25rem;
		flex-wrap: wrap;
	}

	.hero-cert-img {
		height: 55px;
		width: auto;
	}

	.cert-text {
		font-size: 0.7rem;
		max-width: 100px;
	}

	.services,
	.about,
	.contact {
		padding: 50px 0;
	}

	.service-item {
			padding: 1.25rem;
	}

	.service-item img {
		height: 180px;
	}

	.contact-info {
		padding: 1.5rem;
	}

	.contact-info input,
	.contact-info textarea {
		padding: 12px;
	}

	.footer-links {
		flex-direction: column;
		gap: 0.5rem;
	}

	.back-to-top a {
		width: 45px;
		height: 45px;
		font-size: 20px;
	}
}

/* Loading Animation */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fade-in-up {
	animation: fadeInUp 0.8s ease-out forwards;
}

/* Scroll Animations */

.scroll-reveal {
	opacity: 0;
	transform: translateY(18px); /* much less distance, appears earlier */
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* much faster fade-in */
}

.scroll-reveal.revealed {
	opacity: 1;
	transform: translateY(0);
}

/* Smooth Scrolling Enhancement */
html {
	scroll-padding-top: 100px;
}

/* Focus States for Accessibility */
*:focus {
	outline: 2px solid var(--primary-color);
	outline-offset: 2px;
}

button:focus,
.btn-primary:focus {
	outline: 3px solid rgba(237, 28, 36, 0.5);
	outline-offset: 2px;
}

/* ======================= */
/* Enhancements requested  */
/* ======================= */

/* 1) Unsere Leistungen: keep images at 4:3 always */
.service-item img {
	aspect-ratio: 4 / 3;
	height: auto !important; /* override earlier fixed heights */
	object-fit: cover;
	display: block;
}

/* Ensure mobile also honors 4:3 ratio */
@media (max-width: 480px) {
	.service-item img {
		aspect-ratio: 4 / 3;
		height: auto !important;
	}
}

/* 2) Make hero text color match services text color */
/* Use the same token used in services: var(--text-color) */
.hero {
	color: var(--text-color);
}

.hero h1,
.hero p {
	color: var(--text-color);
}

/* Light mode explicit override to beat earlier #000 rules */
body:not([data-theme="dark"]) .hero {
	/* color: var(--text-color); */
}

body:not([data-theme="dark"]) .hero h1 {
	/* color: var(--text-color); */
    color: #0a0a0a !important;
    text-shadow: 0 4px 15px rgba(255,255,255,0.8), 0 2px 5px rgba(0,0,0,0.1) !important;
}

body:not([data-theme="dark"]) .hero p {
	/* color: var(--text-color); */
    color: #1a1a1a !important;
    font-weight: 700 !important;
    text-shadow: 0 0 15px rgba(255,255,255,0.7) !important;
}

/* ======================= */
/* NEW: Unified Navigator Buttons */
/* Appended at the end to ensure these styles take precedence */

/* Base token */
:root {
	--nav-btn-size: 52px;
	--nav-btn-gap: 10px;
}

/* container alignment */
.header-actions {
	display: flex !important;
	align-items: center;
	gap: var(--nav-btn-gap) !important;
}

/* Base nav button */
.nav-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: var(--nav-btn-size) !important;
	height: var(--nav-btn-size) !important;
	min-width: var(--nav-btn-size) !important;
	max-width: var(--nav-btn-size) !important;
	border-radius: 999px !important;
	background: var(--card-bg) !important;
	color: var(--text-color) !important;
	border: 1px solid rgba(0,0,0,0.06) !important;
	box-shadow: var(--card-shadow) !important;
	padding: 0 !important;
	cursor: pointer !important;
	gap: 6px !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nav-btn:focus { outline: 3px solid rgba(237,28,36,0.18) !important; }
.nav-btn i, .nav-btn img { font-size: 1.25rem !important; line-height: 1 !important; }

/* Variants */
.nav-btn--lang { /* inherits global --nav-btn-size; font-size can remain slightly larger for the flag */ font-size: 1.4rem; }
.nav-btn--theme { /* inherits global --nav-btn-size; no override */ --nav-btn-size-inherit: 1; }
.nav-btn--menu { /* inherits global --nav-btn-size; no override */ --nav-btn-size-inherit: 1; }
.nav-btn--phone { /* inherits global --nav-btn-size; no override */ --nav-btn-size-inherit: 1; }

/* Phone uses the global --nav-btn-size so it matches other nav buttons */
.nav-btn--phone { /* inherits global --nav-btn-size for consistent sizing */ --nav-btn-phone-inherit: 1; }

/* Phone expanded state: show text next to icon */
.nav-btn--phone.nav-btn--expanded { padding: 0 12px; width: auto !important; min-width: var(--nav-btn-size) !important; max-width: 240px !important; }
.nav-btn--phone .phone-text { display: none; }
.nav-btn--phone.nav-btn--expanded .phone-text { display: inline-block; margin-left: 8px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 160px; }

/* Phone compact state: icon-only */
.nav-btn--phone.nav-btn--compact { width: var(--nav-btn-size); padding: 0 !important; }
.nav-btn--phone.nav-btn--compact .phone-text { display: none !important; }

/* Make sure language select wrapper shows single centered flag */
.lang-select-wrapper.nav-btn { width: var(--nav-btn-size) !important; padding: 0 !important; }
.lang-display { width: var(--nav-btn-size) !important; height: var(--nav-btn-size) !important; font-size: 20px !important; }

/* Reduce sizes on very small screens */
@media (max-width: 420px) {
	:root { --nav-btn-size: 44px; --nav-btn-gap: 8px; }
	.nav-btn { padding: 0 6px !important; }
	/* Keep phone button at full size */
	.phone-toggle { --nav-btn-size: 52px; }
}

/* Utility: force nav buttons to the right aligned cluster without overlaps */
.header-actions .nav-btn + .nav-btn { margin-left: 6px !important; }

/* End unified navigator buttons */

/* Backwards-compatibility mappings for older class names */
.nav-button { display: inline-flex; align-items: center; justify-content: center; }
.phone-button {
	/* legacy compact mapping -> icon-only */
	width: var(--nav-btn-size) !important;
	padding: 0 !important;
}
.phone-button .phone-text { display: none !important; }
.phone-expanded {
	/* legacy expanded mapping -> show text */
	padding: 0 12px !important;
	width: auto !important;
	min-width: 56px !important;
	max-width: 240px !important;
}
.phone-expanded .phone-text { display: inline-block !important; margin-left: 6px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 160px; }

/* Apply darkmode button hover/click animation to all nav buttons */
.nav-btn, .nav-button {
	transition: var(--transition, 180ms ease) !important;
	box-shadow: var(--card-shadow) !important;
}
.nav-btn:hover, .nav-button:hover {
	color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	transform: scale(1.08) !important;
	box-shadow: var(--card-shadow-hover) !important;
}
.nav-btn:active, .nav-button:active {
	transform: scale(0.98) !important;
}

/* Strong portrait / tall aspect override: ensure header stacks logo + buttons for narrow tall viewports
   Targets common phone portrait ratios like 9:16 and narrower widths. Placed at end to win cascade. */
@media (max-aspect-ratio: 9/16), (max-width: 420px) and (orientation: portrait) {
	header .container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 6px !important;
		padding: 8px 10px !important;
	}

	/* Ensure desktop nav is hidden and mobile controls live below the centered logo */
	.desktop-nav { display: none !important; }

	#mobile-menu-toggle { display: flex !important; }

	/* Header actions become a centered row below the logo */
	.header-actions {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
		gap: 8px !important;
		flex-wrap: nowrap !important;
		max-width: 100% !important;
		overflow: visible !important;
	}

	/* Ensure buttons fit in narrow portrait */
	.nav-btn, .nav-button {
		--nav-btn-size: 36px !important;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		flex-shrink: 0 !important;
		margin: 0 !important;
	}
	
	.lang-select {
		--lang-size: 36px !important;
		width: 36px !important;
		height: 36px !important;
		min-width: 36px !important;
		font-size: 20px;
	}
	
	.lang-display {
		font-size: 20px;
		width: 36px;
		height: 36px;
	}
}

/* Portrait hero: ensure image is displayed above heading/text on tall narrow screens */
@media (max-aspect-ratio: 9/16), (max-width: 420px) and (orientation: portrait) {
	.hero .container {
		display: flex !important;
		flex-direction: row !important; /* Keep horizontal for character visibility */
		align-items: center !important;
		gap: 0.3rem !important;
		padding: 16px 2px 16px 12px !important;
		justify-content: space-between !important;
		max-width: 100% !important;
		overflow: visible !important;
	}

	/* Force image to stay on right and be fully visible */
	.hero-image {
		order: 2 !important; /* image after text */
		display: block !important;
		width: 38% !important;
		max-width: 160px !important;
		min-width: 140px !important;
		margin: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		flex-shrink: 0 !important;
		position: relative !important;
		right: -5px !important; /* Slightly overflow right to show full character */
	}
	
	.hero-image img {
		width: 100% !important;
		height: auto !important;
		display: block !important;
	}

	.hero-content {
		order: 1 !important;
		width: 100% !important;
		max-width: 62% !important;
		text-align: left !important;
		padding: 0 4px 0 8px !important;
		margin: 0 !important;
		flex-shrink: 1 !important;
	}

	.hero h1 {
		font-size: clamp(1.35rem, 5.5vw, 1.85rem) !important;
		line-height: 1.05 !important;
		margin-bottom: 0.5rem !important;
		text-align: left !important;
	}

	.hero p {
		font-size: 0.8rem !important;
		margin: 0 0 0.7rem 0 !important;
		max-width: 100% !important;
		line-height: 1.45 !important;
		text-align: left !important;
	}

	.hero .btn-primary {
		margin-top: 0.5rem !important;
		width: auto !important;
		padding: 9px 18px !important;
		font-size: 0.8rem !important;
	}
	
	.hero-actions {
		width: 100% !important;
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 0.7rem !important;
	}
	
	.hero-certificates {
		justify-content: flex-start !important;
		gap: 0.7rem !important;
		width: 100% !important;
		flex-wrap: wrap !important;
	}
	
	.hero-cert-img {
		height: 40px !important;
	}
	
	.cert-text {
		font-size: 0.55rem !important;
		max-width: 75px !important;
	}

	/* Dynamically position mobile-nav below header using --header-height variable */
	.mobile-nav {
		top: calc(var(--header-height, 95px)) !important;
	}
	header .container {
		position: relative !important;
	}
}

/* Upscroll button styles */
.upscroll-section {
    display: flex;
    justify-content: center;
    margin: 2rem 0 0 0;
}
.upscroll-btn {
    background: #e0e0e0;
    color: #333;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: background 0.2s;
}
.upscroll-btn:hover {
    background: #cccccc;
}
.upscroll-btn i {
    font-size: 1.2em;
    color: #888;
}
.upscroll-text {
    font-size: 1em;
    color: #333;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Upscroll button dark mode */
[data-theme="dark"] .upscroll-btn {
    background: #222;
    color: #eee;
}
[data-theme="dark"] .upscroll-btn:hover {
    background: #333;
}
[data-theme="dark"] .upscroll-btn i {
    color: #bbb;
}
[data-theme="dark"] .upscroll-text {
    color: #eee;
}

/* Impressum and Datenschutz pages */
.impressum,
.datenschutz {
    margin-top: 85px;
    padding: 40px 0;
    background: var(--background-color);
}

.impressum.scroll-reveal,
.datenschutz.scroll-reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Layout: center the About block horizontally (content + image) without centering text */
.about > .container {
	display: flex;
	justify-content: center; /* center the group horizontally */
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}
.about .about-content {
	flex: 1 1 640px;
	max-width: 820px;
	text-align: left; /* keep text left-aligned */
}
.about .about-content h2 {
	margin: 0 0 0.6rem 0;
}
.about .about-content p {
	margin: 0 0 1rem 0;
}
.about .about-image {
	flex: 0 0 300px;
	display: flex;
	justify-content: center;
}
.about .about-image img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

@media (max-width: 768px) {
	.about > .container { 
		flex-direction: column; 
		align-items: stretch;
		padding: 0 16px;
	}
	.about .about-image { 
		order: 2;
		flex: 1 1 auto;
		max-width: 100%;
	}
	.about .about-content {
		max-width: 100%;
	}
	.about .about-content h2 {
		font-size: 1.75rem;
		margin-bottom: 1rem;
	}
	.about .about-content p {
		font-size: 1rem;
		line-height: 1.7;
	}
}

.impressum h1,
.datenschutz h1,
.widerruf h1,
.agb h1 {
    text-align: center;
    margin-bottom: 2rem;
    word-break: break-word;
    hyphens: auto;
    font-size: clamp(1.75rem, 5vw, 3rem);
    padding: 0 1rem;
}

@media (max-width: 768px) {
	.impressum h1,
	.datenschutz h1,
	.widerruf h1,
	.agb h1 {
		font-size: clamp(1.5rem, 6vw, 2rem);
		margin-bottom: 1.5rem;
	}
	
	.impressum,
	.datenschutz,
	.widerruf,
	.agb {
		margin-top: 95px;
		padding: 30px 0;
	}
	
	.impressum .container,
	.datenschutz .container,
	.widerruf .container,
	.agb .container {
		padding: 0 16px;
	}
	
	.impressum h2,
	.datenschutz h2,
	.widerruf h2,
	.agb h2 {
		font-size: 1.3rem;
		margin-top: 1.5rem;
		margin-bottom: 1rem;
	}
	
	.impressum p,
	.datenschutz p,
	.widerruf p,
	.agb p {
		font-size: 0.95rem;
		line-height: 1.7;
		margin-bottom: 1rem;
	}
	
	.impressum table,
	.datenschutz table,
	.widerruf table,
	.agb table {
		font-size: 0.9rem;
	}
}

.impressum h2,
.datenschutz h2 {
  margin-top: 2rem;
}

/* Legal pages - consistent list styling */
.impressum ul,
.datenschutz ul,
.widerruf ul,
.agb ul {
  margin: 1rem 0 1.5rem 1.5rem;
  padding-left: 1.5rem;
  list-style-type: disc;
}

.impressum ul li,
.datenschutz ul li,
.widerruf ul li,
.agb ul li {
  color: var(--text-color);
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 0.75rem;
  padding-left: 0.5rem;
}

[data-theme="dark"] .impressum ul li,
[data-theme="dark"] .datenschutz ul li,
[data-theme="dark"] .widerruf ul li,
[data-theme="dark"] .agb ul li {
  color: var(--text-light);
}

.impressum table,
.datenschutz table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.impressum table td,
.datenschutz table td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.impressum .contact-image,
.datenschutz .contact-image {
    text-align: center;
    margin: 2rem 0;
}

.impressum .buro-info,
.datenschutz .buro-info {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: var(--border-radius);
    margin: 2rem 0;
}

/* Cookie Consent Banner */
.cookie-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(5px);
    z-index: 10002; /* Above header (10000) and menu-active header (10001) */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cookie-modal {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 2rem;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: var(--shadow);
    text-align: center;
}

.cookie-modal h2 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.cookie-modal p {
    margin-bottom: 1.5rem;
    color: var(--text-color);
}

.cookie-terms {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--secondary-bg);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.cookie-terms label {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.5;
}

.cookie-terms input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.cookie-terms a {
    color: var(--primary-color);
    text-decoration: underline;
}

.cookie-terms a:hover {
    color: var(--primary-light);
}

.cookie-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 1rem;
}

.cookie-buttons button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

#accept-all {
    background: var(--primary-color);
    color: white;
}

#accept-all:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 28, 36, 0.4);
}

#more-options {
    background: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

#more-options:hover {
    background: var(--hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.cookie-detail-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-top: 1rem;
}

.cookie-detail-buttons button {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

#reject-all {
    background: var(--secondary-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

#reject-all:hover {
    background: var(--hover-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#save-settings {
    background: var(--primary-color);
    color: white;
}

#save-settings:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(237, 28, 36, 0.4);
}

.cookie-details {
    text-align: left;
}

.cookie-option {
    margin-bottom: 1.5rem;
}

.cookie-option label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.cookie-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

.cookie-option p {
    margin-left: 23px;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .cookie-modal {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    .cookie-buttons {
        flex-direction: column;
    }
    
    .cookie-buttons button {
        width: 100%;
    }
    
    .cookie-detail-buttons {
        flex-direction: column;
    }
    
    .cookie-detail-buttons button {
        width: 100%;
    }
    
    .cookie-terms {
        padding: 0.75rem;
    }
}

/* Karriere Page Styles */
.karriere-hero {
    /* Light Mode Overhaul: Clean, modern, breathable */
    background: 
        radial-gradient(circle at 10% 20%, rgba(237, 28, 36, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(237, 28, 36, 0.03) 0%, transparent 40%),
        var(--surface-color);
    color: var(--text-color);
    /* Increased top padding to account for fixed header, removed top margin */
    padding: 180px 0 80px;
    text-align: center;
    margin-top: 0;
    
    /* Full width breakout properties */
    margin-left: calc(var(--safe-side) * -1);
    margin-right: calc(var(--safe-side) * -1);
    width: calc(100% + var(--safe-side) * 2);
    
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px; 
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}

.karriere-hero h1 {
    /* Gradient text for light mode */
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 1rem;
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, var(--text-color) 0%, #444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
    letter-spacing: -1px;
    position: relative;
    z-index: 2;
}

.karriere-hero p {
    font-size: 1.15rem;
    color: #1e293b !important; /* Dark text for light mode readability */
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

[data-theme="dark"] .karriere-hero p {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Decoration lines replaced with Red Glow Effect (Blobs) for all themes */
.karriere-hero::before {
    /* Large Left Blob - Global (Light Mode: Subtle Bluish Tint) */
    content: '';
    position: absolute;
    top: -20%;
    left: -10%;
    width: 70vw;
    height: 70vw;
    max-width: 900px;
    max-height: 900px;
    background: radial-gradient(circle, rgba(200, 225, 255, 0.6) 0%, transparent 70%);
    filter: blur(90px);
    opacity: 0.8;
    transform-origin: center;
    animation: blobMove1 15s infinite alternate ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.karriere-hero::after {
    /* Large Right Blob - Global (Light Mode: Subtle Bluish Tint) */
    content: '';
    position: absolute;
    bottom: -30%;
    right: -20%;
    width: 60vw;
    height: 60vw;
    max-width: 800px;
    max-height: 800px;
    background: radial-gradient(circle, rgba(210, 230, 255, 0.5) 0%, transparent 70%);
    filter: blur(90px);
    opacity: 0.8;
    transform-origin: center;
    animation: blobMove2 20s infinite alternate-reverse ease-in-out;
    z-index: 1;
    pointer-events: none;
}

.karriere-hero .container::before {
    /* Center Pulse - Global (Light Mode: Subtle Bluish Tint) */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(220, 240, 255, 0.4) 0%, transparent 60%);
    filter: blur(50px);
    z-index: -1;
    animation: pulseCore 6s infinite alternate ease-in-out;
    pointer-events: none;
}

/* DARK MODE OVERRIDES */
[data-theme="dark"] .karriere-hero {
    /* Deep dark base */
    background: #020202;
    border-bottom: 1px solid rgba(237, 28, 36, 0.3);
    box-shadow: none;
    overflow: hidden !important;
}

[data-theme="dark"] .karriere-hero::before {
    /* Stronger opacity for Dark Mode */
    background: radial-gradient(circle, rgba(237, 28, 36, 0.6) 0%, transparent 70%);
    opacity: 0.95;
    mask-image: none;
    -webkit-mask-image: none;
}

[data-theme="dark"] .karriere-hero::after {
    /* Stronger opacity for Dark Mode */
    background: radial-gradient(circle, rgba(220, 20, 20, 0.5) 0%, transparent 70%);
    opacity: 0.9;
}

[data-theme="dark"] .karriere-hero .container::before {
    background: radial-gradient(circle, rgba(255, 50, 50, 0.25) 0%, transparent 60%);
}

@keyframes blobMove1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(100px, 50px) scale(1.1); }
}

@keyframes blobMove2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-80px, -40px) scale(1.2); }
}

@keyframes pulseCore {
    0% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.9); }
    100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

[data-theme="dark"] .karriere-hero h1 {
    color: #ffffff !important;
    text-shadow: 0 0 30px rgba(0,0,0,0.8);
    background: none;
    -webkit-text-fill-color: initial;
}

[data-theme="dark"] .karriere-hero p {
    color: rgba(255, 255, 255, 0.95) !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    font-weight: 500;
}

.karriere-hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 3;
}

.karriere-hero .hero-content {
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}

.karriere-content {
    padding: 40px 0 40px;
    background: var(--background-gradient);
    min-height: calc(100vh - 300px);
    position: relative;
}

.karriere-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-pattern);
    pointer-events: none;
}

[data-theme="dark"] .karriere-content::before {
    background: 
        radial-gradient(ellipse at 20% 30%, rgba(237, 28, 36, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(237, 28, 36, 0.06) 0%, transparent 50%);
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: start;
}

.karriere-info {
    margin-bottom: 1rem;
}

.karriere-info h2 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 700;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.benefit-item {
    text-align: center;
    padding: 1.5rem 1rem;
	background: var(--glass-bg-strong, rgba(255, 255, 255, 0.9));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: var(--border-radius);
	box-shadow: var(--card-shadow);
	transition: var(--transition);
	border: 1px solid var(--card-border, rgba(237, 28, 36, 0.08));
}

.benefit-item:hover {
	transform: translateY(-8px);
	box-shadow: var(--card-shadow-hover);
	border-color: var(--primary-color);
}

[data-theme="dark"] .benefit-item {
	background: rgba(30, 30, 30, 0.8);
	border-color: rgba(163, 163, 163, 0.15);
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.3),
		0 8px 24px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .benefit-item:hover {
	background: rgba(237, 28, 36, 0.1);
	border-color: rgba(237, 28, 36, 0.4);
	box-shadow: 
		0 8px 24px rgba(0, 0, 0, 0.35),
		0 16px 48px rgba(237, 28, 36, 0.2),
		0 0 40px rgba(237, 28, 36, 0.15);
}

.benefit-item i {
    font-size: 2.5rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    display: block;
}

[data-theme="dark"] .benefit-item i {
    color: var(--primary-light);
}

.benefit-item h3 {
    color: var(--text-color);
    margin-bottom: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.benefit-item p {
    display: none;
}

.application-section {
	background: var(--glass-bg-strong, rgba(255, 255, 255, 0.9));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: var(--border-radius);
	padding: 2rem;
	box-shadow: var(--card-shadow);
	border: 1px solid var(--card-border, rgba(237, 28, 36, 0.08));
	height: fit-content;
}

[data-theme="dark"] .application-section {
	background: rgba(30, 30, 30, 0.85);
	border-color: rgba(163, 163, 163, 0.15);
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.3),
		0 8px 24px rgba(0, 0, 0, 0.2);
}

.application-section .section-header {
    text-align: center;
    margin-bottom: 1.5rem;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
    color: var(--heading-color) !important;
}

.application-section .section-header i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    display: block;
    opacity: 1 !important;
}

.application-section .section-header h2 {
    color: var(--heading-color) !important;
    font-size: 1.8rem;
    margin-bottom: 0;
    font-weight: 700;
    background: transparent;
    padding: 0;
    border: none;
}

.form-subtitle {
    text-align: center;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    font-size: 1rem;
    line-height: 1.5;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Compact form styling for karriere page */
.karriere-content .contact-form {
    max-width: none;
}

.karriere-content .form-section {
    margin-bottom: 1.5rem;
}

.karriere-content .form-section-title {
    color: var(--primary-color);
    font-size: 1.1rem;
    margin-bottom: 1rem;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    padding-bottom: 0.3rem;
}

.karriere-content .form-group {
    margin-bottom: 1rem;
}

.karriere-content .form-row {
    gap: 1rem;
}

.karriere-content input,
.karriere-content select,
.karriere-content textarea {
    padding: 0.8rem;
    font-size: 0.9rem;
}

.karriere-content textarea {
    min-height: 80px;
}

/* Desktop-specific optimizations */
@media (min-width: 1200px) {
    .karriere-hero {
        padding: 140px 0 60px;
        min-height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .karriere-hero .hero-content {
        padding-top: 20px;
    }
    
    .karriere-hero h1 {
        font-size: 2.5rem;
        margin-bottom: 0.75rem;
        text-align: center;
    }
    
    .karriere-hero p {
        color: #1e293b;
        text-align: center;
    }
    
    [data-theme="dark"] .karriere-hero h1 {
        color: #ffffff !important;
    }
    
    [data-theme="dark"] .karriere-hero p {
        color: rgba(255, 255, 255, 0.95) !important;
    }
    
    .karriere-content {
        padding: 50px 0 30px;
    }
    
    .content-grid {
        gap: 2.5rem;
    }
    
    .benefits-grid {
        gap: 1.2rem;
    }
    
    .benefit-item {
        padding: 1.2rem 0.8rem;
    }
    
    .benefit-item i {
        font-size: 2.2rem;
        margin-bottom: 0.8rem;
    }
    
    .benefit-item h3 {
        font-size: 1.1rem;
        margin-bottom: 0.6rem;
    }
    
    .benefit-item p {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    
    .application-section {
        padding: 1.8rem;
    }
    
    .karriere-content .form-section {
        margin-bottom: 1.2rem;
    }
    
    .karriere-content .form-group {
        margin-bottom: 0.8rem;
    }
}

/* Responsive Design for Karriere Page */
@media (max-width: 1199px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 968px) {
    .benefits-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .karriere-hero h1 {
        font-size: 2.2rem;
    }
    
    .karriere-info h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .karriere-hero {
        padding: 80px 0 50px;
    }
    
    .karriere-hero h1 {
        font-size: 2rem;
    }
    
    .karriere-hero p {
        font-size: 1rem;
    }
    
    .karriere-content {
        padding: 50px 0 30px;
    }

    .benefit-item {
        padding: 1.5rem 1rem;
    }
    
    .karriere-info h2 {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
    }
}

@media (max-width: 480px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .karriere-hero {
        padding: 60px 0 40px;
    }
    
    .karriere-hero h1 {
        font-size: 1.8rem;
    }    .application-section .section-header h2 {
        font-size: 1.6rem;
    }
    
    .benefit-item i {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    .karriere-hero {
        padding: 240px 0 60px !important;
    }
    
    .karriere-hero h1 {
        font-size: 2rem;
    }
    
    .karriere-hero p {
        font-size: 1rem;
    }
    
    .karriere-content {
        padding: 60px 0;
    }
    
    .content-grid {
        gap: 3rem;
    }
    
    .application-section {
        padding: 1.5rem;
    }
    
    .benefit-item {
        padding: 2rem 1.5rem;
    }
    
    .benefits-grid {
        grid-template-columns: 1fr;
    }
    
    .karriere-info h2 {
        font-size: 1.8rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 480px) {
    .karriere-hero {
        padding: 200px 0 50px !important;
    }
    
    .karriere-hero h1 {
        font-size: 1.8rem;
    }
    
    .application-section .section-header h2 {
        font-size: 1.8rem;
    }
    
    .benefit-item i {
        font-size: 3rem;
    }
}

/* Job Cards on Karriere Page */
.jobs-section {
    margin-top: 0;
    padding-top: 0;
}

.jobs-section h2 {
    color: var(--primary-color);
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    font-weight: 700;
}

.jobs-subtitle {
    text-align: center;
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 3rem;
}

.jobs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 3rem;
}

.job-card {
	background: var(--glass-bg-strong, rgba(255, 255, 255, 0.9));
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: var(--card-shadow);
	transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;
	border: 1px solid var(--card-border, rgba(237, 28, 36, 0.08));
	position: relative;
	overflow: hidden;
}

[data-theme="dark"] .job-card {
	background: rgba(30, 30, 30, 0.85);
	border-color: rgba(163, 163, 163, 0.15);
	box-shadow: 
		0 4px 12px rgba(0, 0, 0, 0.3),
		0 8px 24px rgba(0, 0, 0, 0.2);
}

.job-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.job-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--card-shadow-hover);
	border-color: rgba(237, 28, 36, 0.3);
}

[data-theme="dark"] .job-card:hover {
	background: rgba(237, 28, 36, 0.08);
	border-color: rgba(237, 28, 36, 0.4);
	box-shadow: 
		0 8px 24px rgba(0, 0, 0, 0.4),
		0 16px 48px rgba(237, 28, 36, 0.25),
		0 0 60px rgba(237, 28, 36, 0.15);
}

.job-card:hover::before {
    transform: scaleX(1);
}

.job-card-header {
    margin-bottom: 1.5rem;
}

.job-card-title {
    color: var(--text-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.job-card-department {
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, rgba(163, 163, 163, 0.2));
}

[data-theme="dark"] .job-card-meta {
    border-bottom-color: rgba(163, 163, 163, 0.15);
}

.job-card-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-light);
    font-size: 0.9rem;
}

.job-card-meta-item i {
    color: var(--primary-color);
}

[data-theme="dark"] .job-card-meta-item i {
    color: var(--primary-light);
}

.job-card-description {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.job-card-button {
    background: var(--primary-color);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.job-card-button:hover {
    background: var(--secondary-color);
    transform: translateX(5px);
}

.job-card-date {
    color: var(--text-light);
    font-size: 0.85rem;
}

[data-theme="dark"] .job-card-date {
    color: var(--text-muted);
}

.loading-spinner {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.loading-spinner i {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.no-jobs-message {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.no-jobs-message i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-jobs-message h3 {
    color: var(--text-color);
    margin-bottom: 0.5rem;
}

/* Responsive Job Cards */
@media (max-width: 1024px) {
    .jobs-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .jobs-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .job-card {
        padding: 1.5rem;
    }
    
    .job-card-title {
        font-size: 1.3rem;
    }
    
    .jobs-section h2 {
        font-size: 1.6rem;
    }
}

@media (max-width: 480px) {
    .job-card-meta {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .job-card-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .job-card-button {
        width: 100%;
        justify-content: center;
    }
}

/* ===============================================
   Image Lightbox / Zoom Modal
   =============================================== */

.zoomable-image {
    cursor: zoom-in;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.zoomable-image:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.image-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    animation: lightboxFadeIn 0.3s ease;
}

@keyframes lightboxFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.image-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    animation: lightboxZoomIn 0.3s ease;
}

@keyframes lightboxZoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.image-lightbox-content img {
    max-width: 100%;
    max-height: 85vh;
    object-fit: contain;
    border-radius: var(--border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.image-lightbox-close {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.image-lightbox-close:hover {
    background: var(--primary-light);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .image-lightbox-overlay {
        padding: 1rem;
    }
    
    .image-lightbox-close {
        top: -10px;
        right: -10px;
        width: 35px;
        height: 35px;
        font-size: 1.25rem;
    }
    

    .image-lightbox-content img {
        max-height: 80vh;
    }
}
/* ============================================
   DEPLOYMENT MODE TOGGLE - SPECTACULAR APPLE STYLE
   ============================================ */

.deployment-mode-container {
    background: var(--card-bg);
    border-radius: var(--border-radius);
    padding: 3rem;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(237, 28, 36, 0.1);
    margin-bottom: 3rem;
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.deployment-mode-container:hover {
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.1), 0 10px 20px -5px rgba(0,0,0,0.05);
}

.deployment-toggle-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    align-items: center;
}

.deployment-mode-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 1.5rem 3rem;
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.5) 0%, rgba(241, 245, 249, 0.8) 100%);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.02), 
        0 10px 15px -3px rgba(0, 0, 0, 0.05),
        inset 0 0 0 1px rgba(255,255,255,0.5);
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
}

[data-theme="dark"] .deployment-mode-content {
    background: linear-gradient(180deg, rgba(30, 30, 30, 0.5) 0%, rgba(18, 18, 18, 0.8) 100%);
    border-color: rgba(255, 255, 255, 0.05);
    box-shadow: 
        0 4px 6px -1px rgba(0, 0, 0, 0.2), 
        inset 0 0 0 1px rgba(255,255,255,0.05);
}

.deployment-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-light);
    min-width: 100px;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0.6;
    transform: scale(0.95);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.deployment-label .icon {
    font-size: 2rem;
    display: block;
    filter: grayscale(1);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 0.2rem;
}

.deployment-label.active-mode {
    opacity: 1;
    color: var(--text-color);
    transform: scale(1);
    text-shadow: 0 0 20px rgba(0,0,0,0.1);
}

.deployment-label.active-mode .icon {
    filter: grayscale(0);
    transform: scale(1.1);
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
}

.deployment-label.development-label.active-mode {
    color: #8b5cf6; /* Violet */
}

.deployment-label.production-label.active-mode {
    color: #10b981; /* Emerald */
}


/* SPECTACULAR TOGGLE SWITCH - APPLE STYLE */
.toggle-slider-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 1rem;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.toggle-checkbox {
    display: none;
}

.toggle-label {
    position: relative;
    display: block;
    width: 100px;
    height: 56px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.toggle-track {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(145deg, #e2e8f0, #d4d4d4);
    border-radius: 999px;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.15),
        inset 0 -2px 4px rgba(255,255,255,0.8),
        0 2px 4px rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.05);
}

[data-theme="dark"] .toggle-track {
    background: linear-gradient(145deg, #1e1e1e, #121212);
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.5),
        inset 0 -1px 1px rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.05);
}

.toggle-thumb {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 48px;
    height: 48px;
    background: linear-gradient(145deg, #ffffff, #f5f5f5);
    border-radius: 50%;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.15),
        0 8px 16px rgba(0,0,0,0.1),
        inset 0 -2px 4px rgba(0,0,0,0.05),
        inset 0 2px 4px rgba(255,255,255,0.9);
    z-index: 2;
}

/* Interaction States */
.toggle-label:hover .toggle-thumb {
    transform: scale(1.05);
}

.toggle-label:active .toggle-thumb {
    transform: scale(0.95);
    width: 54px; /* Stretch effect like iOS */
}

/* Checked State - Production Mode */
.toggle-checkbox:checked ~ .toggle-label .toggle-track {
    background: linear-gradient(145deg, #22c55e, #16a34a); /* Green gradient */
    box-shadow: 
        inset 0 2px 8px rgba(0,0,0,0.2),
        inset 0 -2px 4px rgba(255,255,255,0.2),
        0 0 0 2px rgba(34, 197, 94, 0.1);
}

.toggle-checkbox:checked ~ .toggle-label .toggle-thumb {
    left: calc(100% - 52px); /* 100px width - 48px thumb - 4px padding-right */
    background: #ffffff;
    box-shadow: 
        0 4px 8px rgba(0,0,0,0.2),
        0 8px 16px rgba(0,0,0,0.15),
        inset 0 -2px 4px rgba(0,0,0,0.05),
        inset 0 2px 4px rgba(255,255,255,1);
}

/* Active stretch adjustment for checked state */
.toggle-checkbox:checked ~ .toggle-label:active .toggle-thumb {
    left: calc(100% - 58px); /* Adjust for width increase */
}

/* Focus State */
.toggle-checkbox:focus-visible ~ .toggle-label .toggle-track {
    outline: 4px solid rgba(59, 130, 246, 0.5);
    outline-offset: 4px;
}

/* Info Boxes - Elegant Cards */
.deployment-info {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 600px;
    perspective: 1000px; /* For 3D flip effect */
}

.info-box {
    padding: 2rem;
    border-radius: 20px;
    background: white;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 
        0 10px 25px -5px rgba(0, 0, 0, 0.05), 
        0 5px 10px -5px rgba(0, 0, 0, 0.02);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 160px;
    display: none;
    opacity: 0;
    transform: translateY(20px) scale(0.95) rotateX(10deg);
    position: relative;
    overflow: hidden;
}

.info-box.active {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0);
	animation: serviceTextIn 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s forwards;
}

[data-theme="dark"] .info-box {
    background: rgba(30, 30, 30, 0.5);
    border-color: rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

/* Development Mode Styling */
.info-box.development-info {
    background: linear-gradient(135deg, #fbf7ff 0%, #ffffff 100%);
    border-left: 6px solid #8b5cf6;
}

[data-theme="dark"] .info-box.development-info {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.info-box.development-info strong {
    color: #7c3aed;
}

.info-box.development-info li::before {
    color: #7c3aed;
    background: rgba(124, 58, 237, 0.1);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    margin-right: 10px;
    left: -34px; /* Adjust positioning */
}

/* Production Mode Styling */
.info-box.production-info {
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
    border-left: 6px solid #10b981;
}

[data-theme="dark"] .info-box.production-info {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
}

.info-box.production-info strong {
    color: #059669;
}

.info-box.production-info li::before {
    color: #059669;
    background: rgba(5, 150, 105, 0.1);
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8rem;
    margin-right: 10px;
    left: -34px; /* Adjust positioning */
}

.info-box strong {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.info-box ul {
    gap: 1rem;
    padding-left: 0.5rem; /* Reset standard padding */
}

.info-box li {
    font-size: 1.05rem;
    color: var(--text-color);
    padding-left: 0; /* Use flex alignment instead of padding */
    display: flex; /* Better alignment */
    align-items: flex-start;
    gap: 0.8rem;
}

.info-box li::before {
    content: '✓';
    position: relative; /* Change from absolute */
    left: auto;
    flex-shrink: 0; /* Prevent icon shrinking */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .deployment-mode-content {
        flex-direction: column;
        padding: 2rem 1.5rem;
        gap: 1.5rem;
    }
    
    .deployment-toggle-wrapper {
        gap: 1.5rem;
    }
    
    .toggle-label {
        transform: scale(0.9); /* Slightly smaller on mobile */
    }
    
    .deployment-label {
        flex-direction: row;
        font-size: 1.1rem;
    }
    
    .deployment-label .icon {
        margin-bottom: 0;
        font-size: 1.5rem;
    }
    
    .info-box {
        padding: 1.5rem;
    }
}

/* ============================================
   GOOGLE REVIEWS SECTION - PREMIUM REDESIGN
   ============================================ */

/* Section Base */
.reviews-section {
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
    background: var(--background-color);
    transition: background-color 0.15s ease;
}

/* Review Cards - Production styling */
.review-card-inner {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(237, 28, 36, 0.15);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

[data-theme="dark"] .review-card-inner {
    background: rgba(45, 45, 50, 0.98);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.5),
        0 0 60px rgba(237, 28, 36, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Background Pattern */
.reviews-bg-pattern {
    position: absolute;
    inset: 0;
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(237, 28, 36, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(237, 28, 36, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(237, 28, 36, 0.05) 0%, transparent 40%);
    pointer-events: none;
}

[data-theme="dark"] .reviews-bg-pattern {
    background: 
        radial-gradient(ellipse 80% 50% at 50% -20%, rgba(237, 28, 36, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(237, 28, 36, 0.08) 0%, transparent 40%),
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(237, 28, 36, 0.08) 0%, transparent 40%);
}

/* Header Styles */
.reviews-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 1;
}

/* Google Rating Badge - Premium Design */
.google-badge-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2rem;
}

.google-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: var(--glass-bg, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 1rem 2rem;
    border-radius: 60px;
    border: 1px solid var(--card-border, rgba(237, 28, 36, 0.1));
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(237, 28, 36, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    transition: var(--transition);
}

.google-rating-badge:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.1),
        0 16px 48px rgba(237, 28, 36, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .google-rating-badge {
    background: rgba(30, 30, 30, 0.85);
    border-color: rgba(237, 28, 36, 0.2);
    box-shadow: 
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 8px 32px rgba(237, 28, 36, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .google-rating-badge:hover {
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 16px 48px rgba(237, 28, 36, 0.2),
        0 0 60px rgba(237, 28, 36, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.badge-glow {
    position: absolute;
    inset: -2px;
    border-radius: 62px;
    background: linear-gradient(135deg, rgba(237, 28, 36, 0.3), transparent, rgba(237, 28, 36, 0.3));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    filter: blur(8px);
}

.google-rating-badge:hover .badge-glow {
    opacity: 1;
}

.google-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .google-icon {
    background: rgba(255, 255, 255, 0.95);
}

.rating-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.rating-stars {
    display: flex;
    gap: 3px;
    color: #fbbf24;
    font-size: 1.1rem;
    filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}

/* Precise Star Rating (Per-Star Overlay Method) */
.stars-container {
    display: flex;
    gap: 3px;
    align-items: center;
}

.single-star-box {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #e2e8f0; /* Empty star color */
    font-size: 1.1rem; /* Adjust base size */
}

/* Base empty star */
.single-star-box .fa-star {
    display: block;
}

/* Filled overlay */
.single-star-box .filled-overlay {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    overflow: hidden;
    color: #fbbf24;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); /* Drop shadow to distinguish from white */
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* Small variation for cards */
.review-stars-small .single-star-box {
    font-size: 0.7rem;
}

/* Override previous wrapper if unused or keep for safety */
.star-rating-wrapper {
    display: none; /* Deprecated */
}

.rating-info {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.rating-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-color);
    letter-spacing: -0.02em;
}

.rating-text {
    font-size: 0.85rem;
    color: var(--text-light);
    font-weight: 500;
}

/* Title Styles */
.reviews-title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--text-color);
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.title-underline {
    width: 80px;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light, #ff4d54));
    border-radius: 2px;
    margin: 0 auto 1.5rem;
}

.reviews-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    max-width: 550px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Reviews Grid */
.reviews-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    position: relative;
    z-index: 1;
}

@media (max-width: 1024px) {
    .reviews-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    .reviews-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* Review Card - Premium Glassmorphism */
.review-card {
    position: relative !important;
    border-radius: 16px !important;
    transition: all 0.3s ease !important;
}

.review-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, 
        rgba(237, 28, 36, 0.2) 0%, 
        transparent 50%, 
        rgba(237, 28, 36, 0.1) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.review-card:hover::before {
    opacity: 1;
}

.review-card:hover {
    transform: translateY(-8px);
}

.review-card:hover .review-card-inner {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 24px 64px rgba(237, 28, 36, 0.1) !important;
}

[data-theme="dark"] .review-card:hover .review-card-inner {
    box-shadow: 
        0 12px 40px rgba(0, 0, 0, 0.5),
        0 24px 64px rgba(237, 28, 36, 0.2),
        0 0 80px rgba(237, 28, 36, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(237, 28, 36, 0.35) !important;
}

/* Quote Icon */
.review-quote-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 2rem;
    color: var(--primary-color);
    opacity: 0.15;
    transition: var(--transition);
}

.review-card:hover .review-quote-icon {
    opacity: 0.25;
    transform: scale(1.1);
}

/* Review Text */
.review-text {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-color);
    flex: 1;
    margin-bottom: 1.5rem;
    position: relative;
    font-style: italic;
}

[data-theme="dark"] .review-text {
    color: rgba(255, 255, 255, 0.9);
}

/* Review Footer */
.review-footer {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
    margin-top: auto;
}

[data-theme="dark"] .review-footer {
    border-color: rgba(255, 255, 255, 0.08);
}

/* Reviewer Avatar */
.reviewer-avatar {
    position: relative;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light, #ff4d54) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.reviewer-avatar span {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
}

.avatar-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    opacity: 0.3;
    animation: pulse-ring 2s ease-out infinite;
}

@keyframes pulse-ring {
    0% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.05); opacity: 0.15; }
    100% { transform: scale(1); opacity: 0.3; }
}

.review-card:hover .avatar-ring {
    animation-duration: 1s;
}

/* Reviewer Info */
.reviewer-info {
    flex: 1;
    min-width: 0;
}

.reviewer-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
    margin: 0 0 0.25rem;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.review-stars-small {
    display: flex;
    gap: 2px;
    color: #fbbf24;
    font-size: 0.7rem;
}

.review-date {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Google Verified Badge */
.google-verified {
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
}

.google-verified i {
    font-size: 0.9rem;
    background: linear-gradient(135deg, #4285F4, #34A853, #FBBC05, #EA4335);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .google-verified {
    background: rgba(255, 255, 255, 0.95);
}

.review-card:hover .google-verified {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* CTA Button */
.reviews-cta {
    text-align: center;
    margin-top: 3.5rem;
    position: relative;
    z-index: 1;
}

.google-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    background: transparent;
    border: 2px solid var(--primary-color);
    border-radius: 50px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.google-cta-btn .btn-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light, #ff4d54));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.google-cta-btn:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(237, 28, 36, 0.3);
}

.google-cta-btn:hover .btn-bg {
    opacity: 1;
}

.google-cta-btn i,
.google-cta-btn span {
    position: relative;
    z-index: 1;
}

.google-cta-btn .fa-arrow-right {
    transition: transform 0.3s ease;
}

.google-cta-btn:hover .fa-arrow-right {
    transform: translateX(4px);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .reviews-section {
        padding: 3rem 0;
    }
    
    .reviews-section .container {
        padding: 0 16px;
    }
    
    .reviews-header {
        margin-bottom: 2.5rem;
    }
    
    .google-rating-badge {
        padding: 0.875rem 1.5rem;
        gap: 0.75rem;
    }
    
    .google-icon {
        width: 36px;
        height: 36px;
    }
    
    .google-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .rating-stars {
        font-size: 0.9rem;
    }
    
    .rating-number {
        font-size: 1.25rem;
    }
    
    .reviews-title {
        font-size: 1.75rem;
        margin-top: 1.5rem;
    }
    
    .reviews-subtitle {
        font-size: 1rem;
    }
    
    .reviews-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .review-card {
        margin: 0 auto;
        max-width: 100%;
    }
    
    .review-card-inner {
        padding: 1.5rem;
    }
    
    .review-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .reviewer-avatar {
        width: 42px;
        height: 42px;
    }
    
    .reviewer-avatar span {
        font-size: 1.1rem;
    }
    
    .reviewer-name {
        font-size: 0.95rem;
    }
    
    .reviews-cta {
        margin-top: 2rem;
    }
    
    .google-cta-btn {
        padding: 14px 24px;
        font-size: 0.95rem;
    }
}


/* ============================================
   INITIATIV BEWERBUNG & JOB FORM STYLES
   (Copied from karriere.html for global use)
   ============================================ */

.initiativ-form {
    display: grid;
    gap: 1.25rem;
}

.initiativ-form-section {
    display: contents;
}

.initiativ-form-section h4 {
    grid-column: 1 / -1;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary-color, #ed1c24);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0.5rem 0 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.initiativ-form-section h4 i {
    font-size: 0.85rem;
}

.initiativ-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.initiativ-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.initiativ-form-group label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted, #64748b);
}

.initiativ-form-group input,
.initiativ-form-group select,
.initiativ-form-group textarea {
    width: 100%;
    padding: 0.7rem 0.9rem;
    border: 2px solid var(--input-border, rgba(163, 163, 163, 0.3));
    border-radius: var(--border-radius-small, 8px);
    font-size: 0.95rem;
    color: var(--text-color, #1e293b);
    background: var(--input-bg, #ffffff);
    transition: all 0.2s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.initiativ-form-group input:hover,
.initiativ-form-group select:hover,
.initiativ-form-group textarea:hover {
    border-color: rgba(237, 28, 36, 0.3);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(237, 28, 36, 0.05);
}

.initiativ-form-group input:focus,
.initiativ-form-group select:focus,
.initiativ-form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color, #ed1c24);
    box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.1), 0 2px 8px rgba(237, 28, 36, 0.1);
}

.initiativ-form-group input::placeholder,
.initiativ-form-group textarea::placeholder {
    color: var(--text-muted, #94a3b8);
}

.initiativ-form-group textarea {
    min-height: 80px;
    resize: vertical;
}

.initiativ-form-group select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

/* Checkbox - Compact */
.initiativ-checkbox {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    padding: 0.75rem 1rem;
    background: var(--bg-hover, rgba(0, 0, 0, 0.02));
    border-radius: var(--border-radius-small, 8px);
    border: 1px solid var(--border-color, rgba(0, 0, 0, 0.06));
    transition: all 0.2s ease;
    margin-top: 0.5rem;
}

.initiativ-checkbox:hover {
    border-color: rgba(237, 28, 36, 0.2);
    background: rgba(237, 28, 36, 0.02);
}

.initiativ-checkbox input {
    display: none;
}

.initiativ-checkbox .checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-color, #cbd5e1);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.initiativ-checkbox .checkmark::after {
    content: '\f00c';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.6rem;
    color: white;
    opacity: 0;
    transform: scale(0);
    transition: all 0.2s ease;
}

.initiativ-checkbox input:checked + .checkmark {
    background: var(--primary-color, #ed1c24);
    border-color: var(--primary-color, #ed1c24);
}

.initiativ-checkbox input:checked + .checkmark::after {
    opacity: 1;
    transform: scale(1);
}

.initiativ-checkbox .label-text {
    font-size: 0.85rem;
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.initiativ-checkbox .label-text a {
    color: var(--primary-color, #ed1c24);
    text-decoration: none;
    font-weight: 500;
}

.initiativ-checkbox .label-text a:hover {
    text-decoration: underline;
}

/* Form Actions */
.initiativ-form-footer {
    grid-column: 1 / -1;
}

.initiativ-form-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.initiativ-btn-primary {
    flex: 1;
    background: linear-gradient(135deg, var(--primary-color, #ed1c24), #c41920);
    color: white;
    box-shadow: 0 4px 12px rgba(237, 28, 36, 0.25);
    padding: 0.75rem 1.25rem;
    border-radius: var(--border-radius-small, 8px);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    border: none;
}

.initiativ-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(237, 28, 36, 0.35);
}

/* Dark Mode */
[data-theme="dark"] .initiativ-form-group input,
[data-theme="dark"] .initiativ-form-group select,
[data-theme="dark"] .initiativ-form-group textarea {
    background: var(--input-bg, rgba(30, 30, 30, 0.8));
    border-color: var(--input-border, rgba(163, 163, 163, 0.2));
    color: var(--text-color, #f5f5f5);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .initiativ-form-group input:hover,
[data-theme="dark"] .initiativ-form-group select:hover,
[data-theme="dark"] .initiativ-form-group textarea:hover {
    border-color: rgba(237, 28, 36, 0.4);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(237, 28, 36, 0.1);
}

[data-theme="dark"] .initiativ-form-group input:focus,
[data-theme="dark"] .initiativ-form-group select:focus,
[data-theme="dark"] .initiativ-form-group textarea:focus {
    border-color: var(--primary-light, #ff4d4d);
    box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.2), 0 2px 12px rgba(237, 28, 36, 0.15);
}

[data-theme="dark"] .initiativ-checkbox {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .initiativ-checkbox .checkmark {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Responsive */
@media (max-width: 768px) {
    .initiativ-form-row {
        grid-template-columns: 1fr;
    }
}