/* 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);
}

/* Modern Button Styles */
.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
	color: white;
	padding: 16px 32px;
	border-radius: var(--border-radius-small);
	font-weight: 600;
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	border: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--transition);
	box-shadow: 0 4px 15px rgba(237, 28, 36, 0.3);
}

.btn-primary::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;
}

.btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(237, 28, 36, 0.4);
}

.btn-primary:hover::before {
	left: 100%;
}

.btn-primary:active {
	transform: translateY(0);
}

.theme-toggle {
	background: var(--card-bg);
	border: 2px solid transparent;
	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);
	box-shadow: var(--card-shadow);
}

.theme-toggle:hover {
	color: var(--primary-color);
	border-color: var(--primary-color);
	transform: scale(1.1);
	box-shadow: var(--card-shadow-hover);
}

/* 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(--card-bg);
	border: 1px solid rgba(0,0,0,0.06);
	box-shadow: var(--card-shadow);
	cursor: pointer;
	flex-shrink: 0;
}
.nav-button i, .nav-button img {
	font-size: 1.2rem;
}

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


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

/* 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: var(--card-bg);
	color: var(--text-color);
	border: 1px solid rgba(0,0,0,0.06);
	/* Keep button perfectly square using a CSS variable */
	--lang-size: 52px;
	width: var(--lang-size);
	height: var(--lang-size);
	min-width: var(--lang-size);
	padding: 0;
	border-radius: 50%;
	font-size: 30px; /* 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 */
}

/* 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 { color: transparent; }
.lang-select option { color: initial; font-size: 18px; }

/* Some browsers show the selected option inside the select; ensure it doesn't show the duplicate flag */
.lang-select::-ms-value { color: 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: 28px;
	line-height: 1;
	width: var(--lang-size);
	height: var(--lang-size);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* 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: 44px; font-size: 26px; }
	.lang-display { width: var(--lang-size); height: var(--lang-size); font-size: 22px; }
}

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

/* 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 {
	background: var(--header-bg);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
	position: fixed;
	/* full-bleed header but respect safe-area insets so buttons/content aren't clipped */
	width: calc(100% - (var(--safe-side) * 2));
	left: var(--safe-side);
	right: var(--safe-side);
	top: 0;
	z-index: 10000;
	transition: var(--transition);
	border-bottom: 1px solid rgba(237, 28, 36, 0.1);
	overflow: visible;
}

/* 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: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 2px solid rgba(237, 28, 36, 0.1);
	box-shadow: 0 4px 20px 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: 12px; }
}

.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: rgba(18, 18, 18, 0.95);
	border-bottom-color: rgba(237, 28, 36, 0.2);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

[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 {
	background: linear-gradient(135deg,
		var(--hero-color-1) 0%,
		var(--hero-color-2) 100%);
	background-size: auto; /* static background */
	background-attachment: scroll; /* Changed from fixed to scroll */
	background-position: center;
	animation: none; /* disable animated gradient */
	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 */
}

@keyframes gradientShift {
	0%, 100% { background-position: 0% 50%; }
	25% { background-position: 100% 0%; }
	50% { background-position: 100% 100%; }
	75% { background-position: 0% 100%; }
}

.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 40%),
		radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 40%),
		radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 40%);
	animation: none; /* disable floating animation */
	pointer-events: none;
}

@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: white hero with black text and no overlays */
body:not([data-theme="dark"]) .hero {
	background: var(--hero-bg-light);
	color: var(--hero-text-light);
}

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

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

[data-theme="dark"] .hero {
	background: linear-gradient(135deg,
	var(--hero-color-1) 0%,
	var(--hero-color-2) 100%);
}

.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;
}

@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);
}

.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;
}

.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: 1rem;
	color: white;
	font-weight: 600;
	position: relative;
	overflow: hidden;
}

/* Light mode overrides: black text on white hero */
body:not([data-theme="dark"]) .hero h1 {
	color: #000;
	text-shadow: none;
}
body:not([data-theme="dark"]) .hero p {
	color: #000;
	text-shadow: none;
}
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"]) .hero .btn-primary::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);
}

.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-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 */
}

/* 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: radial-gradient(circle at 20% 80%, rgba(237, 28, 36, 0.03) 0%, transparent 50%),
				radial-gradient(circle at 80% 20%, rgba(237, 28, 36, 0.03) 0%, transparent 50%);
	pointer-events: none;
}

.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%);
}

.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;
		flex-direction: row;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 1rem;
		padding: 0;
		margin: 1rem 0 0;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
	}
	.services-grid::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}
	/* Make cards full width minus gap */
	.service-item {
		/* keep cards full visually (no pill narrowness) */
		flex-shrink: 0;
		width: 300px; /* fixed width close to desktop card width */
		min-width: 260px; /* support very small phones */
		max-width: 320px;
		box-sizing: border-box; /* ensure padding/border included in width */
		scroll-snap-align: start;
		flex: 0 0 auto;
		min-height: 360px; /* keep card height similar to desktop */
	}
}

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

.service-item {
	background: var(--card-bg);
	padding: 1rem; /* smaller card padding */
	border-radius: var(--border-radius);
	text-align: center;
	transition: transform 0.18s cubic-bezier(0.4,0,0.2,1) 0s, box-shadow 0.18s cubic-bezier(0.4,0,0.2,1) 0s, background 0.18s cubic-bezier(0.4,0,0.2,1) 0s, border-color 0.18s cubic-bezier(0.4,0,0.2,1) 0s;
	box-shadow: var(--card-shadow);
	border: 1px solid rgba(237, 28, 36, 0.1);
	position: relative;
	overflow: hidden;
	flex: initial; /* neutralize old flex sizing */
	scroll-snap-align: start;
	min-width: 0; /* allow grid item to shrink and not overflow */
}

/* Strong mobile override placed after the global .service-item rules
   This prevents earlier/later generic declarations from collapsing the cards
   into narrow pills. Uses higher specificity and !important where needed. */
@media (max-width: 767px) {
	.services .services-grid {
		display: flex !important;
		flex-direction: row !important;
		overflow-x: auto !important;
		overflow-y: visible !important; /* allow vertical overflow so shadows/glow are visible */
		-webkit-overflow-scrolling: touch !important;
		scroll-snap-type: x mandatory !important;
		gap: 1rem !important;
		/* center first/last card and give room for shadows */
		padding-top: 1.25rem !important;
		padding-bottom: 1.25rem !important;
		padding-left: calc((100vw - 300px) / 2) !important;
		padding-right: calc((100vw - 300px) / 2) !important;
	/* allow vertical scroll on page while hovering over cards */
	touch-action: auto !important;
	overscroll-behavior: auto !important;
		margin: 1rem 0 0 !important;
		align-items: center !important; /* vertically center cards */
	}

	.services .services-grid .service-item {
		flex: 0 0 auto !important;
		width: 300px !important;
		min-width: 260px !important;
		max-width: 320px !important;
		box-sizing: border-box !important;
		scroll-snap-align: center !important; /* center snap */
		height: 360px !important; /* enforce equal height */
		min-height: 360px !important;
		overflow: hidden !important;
		z-index: 2 !important; /* keep card and its shadow above background overlays */
		display: flex !important;
		flex-direction: column !important;
		justify-content: flex-start !important;
	}

	/* ensure images and text don't cause a secondary vertical scrollbar */
	.services .services-grid .service-item img {
		width: 100% !important;
		height: 150px !important; /* consistent image area */
		object-fit: cover !important;
		display: block !important;
		border-radius: var(--border-radius-small) !important;
	}

	.services .services-grid .service-item h3 {
		flex: 0 0 auto !important;
		margin: 0.75rem 0 0.5rem !important;
		font-size: 1.2rem !important;
	}

	.services .services-grid .service-item p {
		flex: 1 1 auto !important;
		margin: 0 !important;
		overflow: auto !important; /* if text is long, scroll inside card */
		color: var(--text-light) !important;
	}

	/* disable scroll-reveal on mobile for service items so all are visible immediately */
	.services .services-grid .service-item.scroll-reveal,
	.services .services-grid .service-item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

.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;
}

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

.service-item:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: var(--card-shadow-hover);
	background: linear-gradient(135deg, var(--card-bg) 0%, rgba(237, 28, 36, 0.05) 100%);
	border-color: rgba(237, 28, 36, 0.2);
}

.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;
	border-radius: var(--border-radius-small);
}
.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;
}
.service-images img.active {
	opacity: 1;
	z-index: 1;
}
.service-images .aktion-badge {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
}

.service-item h3 {
	margin-bottom: 1rem;
	color: var(--primary-color);
	font-size: 1.4rem;
	font-weight: 700;
	position: relative;
}

.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;
}

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

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

.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);
}

.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);
	z-index: -1;
	opacity: 0.1;
	transition: var(--transition);
}

.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: var(--card-shadow);
	transition: var(--transition);
	display: block;
}

.about-image img:hover {
	transform: scale(1.05);
	box-shadow: 0 25px 50px rgba(237, 28, 36, 0.2);
}

/* 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: radial-gradient(circle at 30% 70%, rgba(237, 28, 36, 0.03) 0%, transparent 50%);
	pointer-events: none;
}

.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(--card-bg);
	border-radius: var(--border-radius);
	box-shadow: var(--card-shadow);
	border: 1px solid rgba(237, 28, 36, 0.1);
	margin-bottom: 2rem;
	overflow: hidden;
	transition: var(--transition);
}

.contact-section:hover {
	box-shadow: var(--card-shadow-hover);
	transform: translateY(-2px);
}

.section-header {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
	color: white;
	padding: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.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 */
.checkbox-group, .radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 0.5rem;
}

/* 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: center;
	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 */
}

.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 */
}

.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: 12px 16px;
	border: 2px solid rgba(237, 28, 36, 0.1);
	border-radius: var(--border-radius-small);
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: inherit;
	font-size: 1rem;
	transition: var(--transition);
	box-sizing: border-box;
}

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

.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(--accent-bg);
	border: none;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-light);
	transition: all 0.3s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-bottom: 3px solid transparent;
}

.form-tab-btn:hover {
	background: rgba(237, 28, 36, 0.05);
	color: var(--primary-color);
}

.form-tab-btn.active {
	background: var(--card-bg);
	color: var(--primary-color);
	border-bottom-color: var(--primary-color);
}

.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: 3rem 2rem;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border-radius: var(--border-radius);
	margin: 2rem 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: #dcfce7;
	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 #22c55e;
	}
}

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

.contact-success-message p {
	color: #166534;
	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: #22c55e;
	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(34, 197, 94, 0.2);
}

.contact-success-message .success-reset-btn:hover {
	background: #16a34a;
	transform: translateY(-2px);
	box-shadow: 0 6px 8px rgba(34, 197, 94, 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 */
}

.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;
}

/* 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 */
}

.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;
}

@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;
}

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

.footer-logo img {
	height: 60px;
	transition: var(--transition);
	filter: brightness(1.1);
}

.footer-logo:hover img {
	transform: scale(1.05);
	filter: brightness(1.3);
}

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

.footer-links a {
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	padding: 6px 12px;
	border-radius: var(--border-radius-small);
	transition: var(--transition);
	position: relative;
	overflow: hidden;
	white-space: nowrap;
}

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

.footer-links a:hover {
	color: white;
	background: rgba(237, 28, 36, 0.2);
	transform: translateY(-2px);
}

.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);
	backdrop-filter: blur(10px);
}

.back-to-top a:hover {
	color: white;
	background: var(--primary-color);
	transform: translateY(-5px) scale(1.1);
	box-shadow: 0 10px 20px rgba(237, 28, 36, 0.3);
}

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);
	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: 1.5rem;
	}
	
	.footer-logo {
		order: 1;
	}
	
	.footer-links {
		order: 2;
		justify-content: center;
		gap: 0.75rem 1rem;
	}
	
	.footer-links a {
		padding: 6px 10px;
		font-size: 0.9rem;
	}
}

/* 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 15px;
	}

	header {
		padding: 8px 0;
	}

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

	.logo img {
		height: 45px;
	}

	/* 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: 8px;
	}

	.theme-toggle {
		width: 32px;
		height: 32px;
		font-size: 13px;
		padding: 6px;
	}

	.mobile-menu-toggle {
		width: 32px;
		height: 32px;
		font-size: 13px;
		padding: 6px;
	}

	/* 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 */
	}

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

	.contact-left-column .contact-section {
		margin-bottom: 1rem; /* Space between sections within left column */
	}

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

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

	.contact-map-section .map-container {
		height: 200px;
		--map-cta-offset: 60px;
	}
}

/* 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: 100px 0 60px;
		margin-top: 100px;
	}

	.hero h1 {
		font-size: clamp(1.8rem, 10vw, 2.5rem);
	}

	.hero p {
		font-size: 1rem;
	}

	.hero .btn-primary {
		padding: 14px 28px;
		font-size: 1rem;
	}

	.services,
	.about,
	.contact {
		padding: 60px 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,
body:not([data-theme="dark"]) .hero p {
	color: var(--text-color);
}

/* ======================= */
/* 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: 520px) and (orientation: portrait) {
	header .container {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		gap: 8px !important;
		padding: 10px 12px !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: 10px !important;
		flex-wrap: wrap !important;
	}

	/* Make nav-buttons visually larger / spaced for touch */
	.nav-btn, .nav-button { margin: 6px !important; }
}

/* Portrait hero: ensure image is displayed above heading/text on tall narrow screens */
@media (max-aspect-ratio: 9/16), (max-width: 520px) and (orientation: portrait) {
	.hero .container {
		display: flex !important;
		flex-direction: column !important; /* stack vertically */
		align-items: center !important;
		gap: 0.6rem !important;
		padding: 12px 12px !important;
	}

	/* Force image first, then content */
	.hero-image {
		order: -1 !important; /* image before text */
		display: block !important;
		width: 92% !important;
		max-width: 420px !important; /* slightly smaller for tighter layout */
		margin: 6px auto 4px auto !important; /* small vertical margin */
		box-shadow: none !important; /* remove any wrapper shadow */
		border-radius: 0 !important; /* remove wrapper rounding */
	}

	.hero-content {
		order: 0 !important;
		width: 100% !important;
		max-width: 720px !important;
		text-align: center !important;
		padding: 0 8px !important;
		margin-top: 6px !important;
	}

	.hero h1 {
		font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
		line-height: 1.02 !important;
		margin-bottom: 0.4rem !important;
	}

	.hero p {
		font-size: 0.98rem !important;
		margin: 0 auto 0.9rem auto !important;
		max-width: 46ch !important;
	}

	.hero .btn-primary {
		margin-top: 0.6rem !important;
		width: auto !important;
		padding: 12px 22px !important;
	}

	/* Dynamically position mobile-nav below header using --header-height variable */
	.mobile-nav {
		top: calc(var(--header-height, 85px)) !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; }
	.about .about-image { order: 2; }
}

.impressum h1,
.datenschutz h1,
.widerruf h1,
.agb h1 {
    text-align: center;
    margin-bottom: 2rem;
    word-break: break-word;
    hyphens: auto;
}

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

.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 {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 100px 0 60px;
    text-align: center;
    margin-top: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.karriere-hero .container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

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

.karriere-hero h1 {
    font-size: 2.5rem;
    margin-bottom: 0.8rem;
    font-weight: 800;
    color: white !important;
    text-align: center;
}

.karriere-hero p {
    font-size: 1.1rem;
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
    color: white !important;
    text-align: center;
    line-height: 1.6;
}

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

.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(--card-background);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: var(--transition);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
}

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

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

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

.benefit-item p {
    display: none;
}

.application-section {
    background: var(--card-background);
    border-radius: var(--border-radius);
    padding: 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    height: fit-content;
}

.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: 80px 0 50px;
        min-height: 250px;
    }
    
    .karriere-hero h1 {
        font-size: 2.3rem;
        margin-bottom: 0.6rem;
        color: white !important;
        text-align: center;
    }
    
    .karriere-hero p {
        color: white !important;
        text-align: center;
        opacity: 0.95;
    }
    
    .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: 100px 0 60px;
    }
    
    .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: 80px 0 50px;
    }
    
    .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(--card-background);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.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(-5px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.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);
}

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

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

.job-card-description {
    color: var(--text-muted);
    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-muted);
    font-size: 0.85rem;
}

.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;
    }
}