/* ==========================================================================
   COMPONENTS.CSS - ALL COMPONENT STYLES
   Per EPIC-049 CSS Consolidation Architecture
   ========================================================================== */

/* ============================================================================
   reCAPTCHA Badge Visibility Control

   Badge visibility is controlled by JavaScript (recaptcha-visibility.js)
   to handle Blazor Server SPA navigation correctly.
   ============================================================================ */

/* Badge permanently hidden - Google reCAPTCHA disclosure in Impressum page */
.grecaptcha-badge {
    /*visibility: hidden !important;*/
    opacity: 0 !important;
}

/* ============================================================================
   ComponentHeadline Component
   US-008: Create ComponentHeadline Reusable Component

   Implementation Date: 2025-10-21
   User Story: US-008
   EPIC: EPIC-004 - Blog Section Enhancement - Interactive Carousel

   FEATURES:
   - Reusable tagline + SVG divider + heading pattern
   - Optional tagline parameter with conditional rendering
   - Responsive typography scaling: Mobile → Tablet → Desktop
   - Design system token compliance: 100% CSS variables, zero hardcoded colors
   - BEM naming convention for maintainability
   - Matches WellnessBenefitsSection visual appearance

   DESIGN SYSTEM TOKENS (21 Total):
   - Typography: --font-body (tagline), --font-heading (heading)
   - Font Sizes: --font-size-xs/sm/base (tagline), --font-size-3xl/4xl/5xl (heading)
   - Font Weights: --font-weight-normal, --font-weight-bold
   - Colors: --color-decorative-copper (tagline + SVG), --color-primary-500 (heading)
   - Letter Spacing: --letter-spacing-wide, --letter-spacing-wider, --letter-spacing-widest
   - Line Heights: --line-height-tight
   - Spacing: --spacing-2, --spacing-3, --spacing-8, --spacing-10, --spacing-12

   BEM NAMING CONVENTION:
   - Block: .component-headline
   - Elements: __tagline, __divider-svg, __heading

   RESPONSIVE BREAKPOINTS:
   - Mobile (<768px): Tagline 12px, SVG 150px, Heading 30px
   - Tablet (768px-1023px): Tagline 14px, SVG 200px, Heading 36px
   - Desktop (1024px+): Tagline 16px, SVG 250px, Heading 48px

   ACCESSIBILITY:
   - WCAG AA contrast: Copper tagline (#8B6F47) on light backgrounds (4.5:1+)
   - WCAG AAA contrast: Wine red heading (#661652) on light backgrounds (11.36:1+)
   - SVG marked aria-hidden="true" (decorative element)
   - Semantic HTML: Paragraph (tagline), H2 (heading)
   ============================================================================ */

/* Container - no specific styling needed, but defined for BEM consistency */
.component-headline {
	/* Flexbox container for vertical stacking */
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Tagline typography - Mobile base (AC5) */
.component-headline__tagline {
	/* Typography - Sans-serif for contrast with serif heading */
	font-family: var(--font-body); /* DM Sans */
	font-size: var(--font-size-xs); /* 12px mobile */
	font-weight: var(--font-weight-normal); /* 400 */
	color: var(--color-decorative-copper); /* Copper #8B6F47 */

	/* Text styling */
	text-transform: uppercase; /* Uppercase transformation */
	letter-spacing: var(--letter-spacing-wider); /* 0.1em elegant spacing */

	/* Alignment */
	text-align: center; /* Center-aligned */

	/* Spacing */
	margin-top: 0; /* No top margin */
	margin-bottom: var(--spacing-3); /* 12px to SVG divider */
	margin-left: 0;
	margin-right: 0;
	padding: 0;
}

/* SVG Divider styling - Mobile base (AC5) */
.component-headline__divider-svg {
	display: block;
	width: 150px; /* Mobile width */
	height: auto; /* Maintain aspect ratio */
	margin: var(--spacing-2) auto; /* 8px top/bottom, centered */
	color: var(--color-decorative-copper); /* Copper #8B6F47 - inherited by currentColor in SVG */
}

/* Heading typography - Mobile base (AC5, AC7) */
.component-headline__heading {
	/* Typography - Premium serif font */
	font-family: var(--font-heading); /* Marcellus serif */
	font-size: var(--font-size-3xl); /* 30px mobile */
	font-weight: var(--font-weight-bold); /* 700 */
	color: var(--color-primary-500); /* Wine red #661652 */
	letter-spacing: var(--letter-spacing-wide); /* 0.05em elegant spacing */
	line-height: var(--line-height-tight); /* 1.2 compact headline */

	/* Alignment */
	text-align: center; /* Center-aligned */

	/* Spacing */
	margin-top: var(--spacing-8); /* 32px top (breathing room from SVG) */
	margin-bottom: var(--spacing-3); /* 12px bottom */
	margin-left: 0;
	margin-right: 0;
}

/* ========================================================================
   Responsive Typography - Tablet Breakpoint (768px-1023px)
   ======================================================================== */
@media (min-width: 768px) {
	/* Tagline font size increase */
	.component-headline__tagline {
		font-size: var(--font-size-sm); /* 14px tablet */
	}

	/* SVG Divider width increase */
	.component-headline__divider-svg {
		width: 200px; /* Tablet width */
	}

	/* Heading font size increase */
	.component-headline__heading {
		font-size: var(--font-size-4xl); /* 36px tablet */
		margin-top: var(--spacing-10); /* 40px top (larger breathing room) */
	}
}

/* ========================================================================
   Responsive Typography - Desktop Breakpoint (1024px+)
   ======================================================================== */
@media (min-width: 1024px) {
	/* Tagline font size maximum */
	.component-headline__tagline {
		font-size: var(--font-size-base); /* 16px desktop */
		letter-spacing: var(--letter-spacing-widest); /* 0.15em maximum elegance */
	}

	/* SVG Divider width maximum */
	.component-headline__divider-svg {
		width: 250px; /* Desktop width */
	}

	/* Heading font size maximum */
	.component-headline__heading {
		font-size: var(--font-size-5xl); /* 48px desktop */
		margin-top: var(--spacing-12); /* 48px top (maximum breathing room) */
	}
}

/* ============================================================================
   ScrollToTopButton Component
   US-025: Create ScrollToTopButton Reusable Component

   Implementation Date: 2025-10-23
   User Story: US-025
   EPIC: EPIC-006 - Scroll to Top Navigation Enhancement

   FEATURES:
   - Circular button with fixed bottom-right positioning
   - Upward arrow icon (Weinrot #2C0021)
   - White background with shadow elevation
   - Hover state with color inversion and scale animation
   - Focus state with visible 2px outline
   - Touch-friendly sizing (44×44px mobile, 48×48px desktop)
   - Responsive spacing adjustments

   DESIGN SYSTEM TOKENS (13 Total):
   - Colors: --color-neutral-white, --color-primary-900
   - Spacing: --spacing-4, --spacing-6
   - Typography: --font-size-2xl, --line-height-none
   - Borders: --radius-full
   - Shadows: --shadow-md, --shadow-lg
   - Layout: --z-index-fixed
   - Transitions: --transition-normal

   BEM NAMING CONVENTION:
   - Block: .scroll-to-top-button
   - Element: .scroll-to-top-button__icon

   RESPONSIVE BREAKPOINTS:
   - Mobile (<1024px): 44×44px button, 16px spacing
   - Desktop (1024px+): 48×48px button, 24px spacing

   ACCESSIBILITY:
   - WCAG AAA contrast: Weinrot icon on white (18.6:1)
   - Touch target: 44×44px minimum (WCAG AA compliance)
   - Keyboard navigation: focus outline visible
   - Semantic HTML: Button element with aria-label
   ============================================================================ */

/* Block: Main button container */
.scroll-to-top-button {
	/* Positioning */
	position: fixed;
	bottom: var(--spacing-4);  /* 16px mobile default */
	right: var(--spacing-4);   /* 16px mobile default */
	z-index: var(--z-index-fixed);  /* 1030 */

	/* Size - Mobile first (44x44px meets WCAG AA touch target) */
	width: 44px;
	height: 44px;

	/* Visual styling */
	border-radius: var(--radius-full);  /* 9999px - circular */
	background-color: var(--color-neutral-white);
	border: none;
	box-shadow: var(--shadow-md);  /* 0 4px 12px rgba(0,0,0,0.1) */

	/* Layout */
	display: flex;
	align-items: center;
	justify-content: center;

	/* Interaction */
	cursor: pointer;
	transition: all var(--transition-normal);  /* 300ms cubic-bezier */

	/* Reset */
	padding: 0;
	margin: 0;
}

/* Element: Icon within button */
.scroll-to-top-button__icon {
	font-size: var(--font-size-2xl);  /* 24px */
	color: var(--color-primary-900);  /* Weinrot #2C0021 */
	line-height: var(--line-height-none);  /* 1 - prevents spacing issues */
	user-select: none;
}

/* State: Hover (not disabled) */
.scroll-to-top-button:hover {
	transform: scale(1.05);
	box-shadow: var(--shadow-lg);  /* 0 8px 24px rgba(0,0,0,0.12) */
	background-color: var(--color-primary-900);
}

.scroll-to-top-button:hover .scroll-to-top-button__icon {
	color: var(--color-neutral-white);
}

/* State: Focus (keyboard navigation) */
.scroll-to-top-button:focus {
	outline: 2px solid var(--color-primary-500);
	outline-offset: 2px;
}

/* State: Active (click feedback) */
.scroll-to-top-button:active {
	transform: scale(0.98);
}

/* Responsive: Desktop (1024px+) */
@media (min-width: 1024px) {
	.scroll-to-top-button {
		/* Larger size for desktop */
		width: 48px;
		height: 48px;

		/* Increased spacing from edges */
		bottom: var(--spacing-6);  /* 24px */
		right: var(--spacing-6);   /* 24px */
	}
}

/* State: Hidden (scroll position < 300px) */
.scroll-to-top-button--hidden {
	opacity: 0;
	pointer-events: none;
}

/* ============================================================================
   Impressum Page Component
   US-029: Create Impressum Static Page

   Implementation Date: 2025-10-24
   User Story: US-029
   EPIC: EPIC-008 - Legal Pages & Compliance

   FEATURES:
   - Static legal notice page with business information
   - DSGVO-compliant privacy policy sections
   - Responsive typography scaling: Mobile → Tablet → Desktop
   - Design system token compliance: 100% CSS variables
   - BEM naming convention for maintainability
   - Mobile-first responsive design

   DESIGN SYSTEM TOKENS:
   - Typography: --font-heading, --font-body
   - Font Sizes: --font-size-base/xl/2xl/3xl/4xl/5xl
   - Font Weights: --font-weight-semibold, --font-weight-bold
   - Colors: --color-neutral-50/700/900, --color-primary-500/700/800
   - Letter Spacing: --letter-spacing-tight
   - Line Heights: --line-height-tight, --line-height-relaxed
   - Spacing: --spacing-4/6/8
   - Border Radius: --radius-sm

   BEM NAMING CONVENTION:
   - Block: .impressum
   - Elements: __container, __heading, __section, __subheading, __text, __address, __link, __strong

   RESPONSIVE BREAKPOINTS:
   - Mobile (<768px): Base font sizes
   - Tablet (768px-1023px): Scaled up heading/subheading sizes
   - Desktop (1024px+): Maximum heading/subheading sizes

   ACCESSIBILITY:
   - WCAG AA contrast: All text colors meet minimum contrast ratios
   - Semantic HTML: address, h1, h2, h3, p, strong tags
   - Focus states: Visible outline on interactive elements
   - Link accessibility: Underline on hover, proper focus states
   ============================================================================ */

/* Impressum Page Container */
.impressum {
	padding: var(--spacing-8) 0;
	background-color: var(--color-neutral-50);
}

.impressum__container {
	/* Using standard container max-width from main.css .container class */
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-4);
}

/* Main Heading */
.impressum__heading {
	font-family: var(--font-heading);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-neutral-900);
	margin-bottom: var(--spacing-8);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
}

/* Section Containers */
.impressum__section {
	margin-bottom: var(--spacing-8);
}

/* Section Subheadings (H2 and H3) */
.impressum__subheading {
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-semibold);
	color: var(--color-neutral-900);
	margin-bottom: var(--spacing-4);
	margin-top: var(--spacing-6);
}

/* Paragraph Text */
.impressum__text {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-neutral-700);
	line-height: var(--line-height-relaxed);
	margin-bottom: var(--spacing-4);
}

/* Address Semantic Tag */
.impressum__address {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-neutral-700);
	line-height: var(--line-height-relaxed);
	font-style: normal;
	margin-bottom: var(--spacing-4);
}

/* Links */
.impressum__link {
	color: var(--color-primary-500);
	text-decoration: none;
	transition: color var(--duration-200) ease;
}

.impressum__link:hover {
	color: var(--color-primary-700);
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1px;
}

.impressum__link:focus {
	outline: 2px solid var(--color-primary-500);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

.impressum__link:active {
	color: var(--color-primary-800);
}

/* Strong Emphasis */
.impressum__strong {
	font-weight: var(--font-weight-bold);
	color: var(--color-neutral-900);
}

/* ==============================================
   RESPONSIVE: TABLET (≥768px)
   ============================================== */
@media (min-width: 768px) {
	.impressum__container {
		padding: 0 var(--spacing-6);
	}

	.impressum__heading {
		font-size: var(--font-size-4xl);
	}

	.impressum__subheading {
		font-size: var(--font-size-2xl);
	}
}

/* ==============================================
   RESPONSIVE: DESKTOP (≥1024px)
   ============================================== */
@media (min-width: 1024px) {
	.impressum__container {
		padding: 0 var(--spacing-8);
	}

	.impressum__heading {
		font-size: var(--font-size-5xl);
	}

	.impressum__subheading {
		font-size: var(--font-size-3xl);
	}
}
/* ============================================================================
   CookieConsentBanner Component
   US-009-002: Cookie Consent Banner Component

   Implementation Date: 2025-10-24
   User Story: US-009-002
   EPIC: EPIC-009 - Cookie Consent Banner

   FEATURES:
   - Fixed bottom positioning with high z-index
   - German consent text display
   - Accept/Reject button functionality
   - Responsive design: Mobile → Tablet → Desktop
   - BEM naming convention for maintainability
   - WCAG AA/AAA accessibility compliance
   - Thai Massage Wellness brand color scheme

   COLOR SCHEME (DesignProfile.js):
   - Background: White (#FFFFFF)
   - Shadow: Wine red tinted rgba(102, 22, 82, 0.08)
   - Headline: Wine Red (#661652) - Primary 500, 11.36:1 contrast (AAA)
   - Text: Dark Neutral (#2F232B) - Neutral 900, 15.5:1 contrast (AAA)
   - Accept Button: Green (#36771A) - Secondary 500, 4.61:1 contrast (AA)
   - Accept Hover: Dark Green (#1D5405) - Secondary 700
   - Reject Button: Light Pink (#F2E1E9) - Neutral 200, Wine Red text
   - Reject Hover: Pink-Grey (#E8D3DD) - Neutral 300

   TYPOGRAPHY (DesignProfile.js):
   - Headline: Marcellus serif, 1.25rem mobile → 1.5rem desktop, bold (700)
   - Paragraph: DM Sans, 0.9rem mobile → 1rem desktop, normal (400)
   - Buttons: 0.9375rem mobile → 1rem desktop, medium (500)

   BEM NAMING CONVENTION:
   - Block: .cookie-banner
   - Elements: __container, __text, __headline, __paragraph, __buttons, __button
   - Modifiers: __button--accept, __button--reject

   RESPONSIVE BREAKPOINTS:
   - Mobile (<768px): Stacked buttons, 1rem padding
   - Tablet (768px-1023px): Horizontal layout, 1.5rem padding
   - Desktop (1024px+): Larger typography, 2rem padding

   ACCESSIBILITY:
   - WCAG AAA contrast: Headline 11.36:1, Paragraph 15.5:1
   - WCAG AA contrast: Accept button 4.61:1
   - Focus indicators: 2px solid outline with 2px offset (brand colors)
   - Touch targets: Buttons 44px minimum height
   - Reduced motion support
   ============================================================================ */

/* Block - Fixed bottom positioning */
.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--cookie-banner-bg);
	box-shadow: 0 -2px 10px var(--cookie-banner-shadow);
	z-index: 9999;
	padding: 1rem;
}

/* Container - Centers content with max-width */
.cookie-banner__container {
	max-width: 1200px;
	margin: 0 auto;
}

/* Text section - Contains headline and paragraphs */
.cookie-banner__text {
	margin-bottom: 1rem;
}

/* Headline - German title (Wine Red, Serif) */
.cookie-banner__headline {
	font-family: 'Marcellus', 'Playfair Display', Georgia, serif;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--cookie-banner-headline);
	line-height: 1.2;
	margin-bottom: 0.75rem;
	margin-top: 0;
}

/* Paragraph - German consent text (Dark Neutral, Sans-serif) */
.cookie-banner__paragraph {
	font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 0.9rem;
	font-weight: 400;
	color: var(--cookie-banner-text);
	line-height: 1.5;
	margin-bottom: 0.5rem;
	margin-top: 0;
}

/* Remove bottom margin from last paragraph */
.cookie-banner__paragraph:last-of-type {
	margin-bottom: 0;
}

/* Buttons container - Mobile: vertical stack */
.cookie-banner__buttons {
	display: flex;
	gap: 1rem;
	flex-direction: column;
}

/* Button base styles */
.cookie-banner__button {
	font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	padding: 0.875rem 2rem;
	border-radius: 2px;
	font-size: 0.9375rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	width: 100%;
	min-height: 44px;
}

/* Accept button - Primary Green CTA */
.cookie-banner__button--accept {
	background-color: var(--cookie-banner-accept-bg);
	color: var(--cookie-banner-accept-color);
	border: none;
}

.cookie-banner__button--accept:hover {
	background-color: var(--cookie-banner-accept-hover-bg);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px var(--cookie-banner-accept-hover-shadow);
}

.cookie-banner__button--accept:focus {
	outline: 2px solid var(--cookie-banner-accept-focus-outline);
	outline-offset: 2px;
}

.cookie-banner__button--accept:active {
	background-color: var(--cookie-banner-accept-active-bg);
	transform: translateY(0);
	box-shadow: none;
}

/* Reject button - Secondary Pink Outlined */
.cookie-banner__button--reject {
	background-color: var(--cookie-banner-reject-bg);
	color: var(--cookie-banner-reject-color);
	border: 1px solid var(--cookie-banner-reject-border);
}

.cookie-banner__button--reject:hover {
	background-color: var(--cookie-banner-reject-hover-bg);
	border-color: var(--cookie-banner-reject-hover-border);
	transform: translateY(-1px);
	box-shadow: 0 2px 8px var(--cookie-banner-reject-hover-shadow);
}

.cookie-banner__button--reject:focus {
	outline: 2px solid var(--cookie-banner-reject-focus-outline);
	outline-offset: 2px;
}

.cookie-banner__button--reject:active {
	background-color: var(--cookie-banner-reject-active-bg);
	border-color: var(--cookie-banner-reject-active-border);
	transform: translateY(0);
	box-shadow: none;
}

/* Tablet (768px+) - Horizontal layout */
@media (min-width: 768px) {
	.cookie-banner {
		padding: 1.5rem;
	}

	.cookie-banner__container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.cookie-banner__text {
		flex: 1;
		margin-bottom: 0;
		margin-right: 2rem;
	}

	.cookie-banner__headline {
		font-size: 1.375rem;
	}

	.cookie-banner__paragraph {
		font-size: 0.9375rem;
	}

	.cookie-banner__buttons {
		flex-direction: row;
		flex-shrink: 0;
	}

	.cookie-banner__button {
		width: auto;
	}
}

/* Desktop (1024px+) - Larger typography and spacing */
@media (min-width: 1024px) {
	.cookie-banner {
		padding: 2rem;
	}

	.cookie-banner__text {
		margin-right: 2.5rem;
	}

	.cookie-banner__headline {
		font-size: 1.5rem;
	}

	.cookie-banner__paragraph {
		font-size: 1rem;
	}

	.cookie-banner__buttons {
		gap: 1.25rem;
	}

	.cookie-banner__button {
		padding: 1rem 2.5rem;
		font-size: 1rem;
	}
}

/* Reduced Motion Support - Accessibility */
@media (prefers-reduced-motion: reduce) {
	.cookie-banner__button {
		transition: none;
	}

	.cookie-banner__button--accept:hover,
	.cookie-banner__button--reject:hover {
		transform: none;
	}
}

/* ============================================================================
   CookiesRejected Component
   US-009-003: Cookies Rejected Static Page
   BEM Naming: .cookies-rejected__*
   ============================================================================ */

/* Container - Centered content with max-width */
.cookies-rejected__container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--spacing-4);
}

/* Main Heading (H1) */
.cookies-rejected__heading {
	font-family: var(--font-heading);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-bold);
	color: var(--color-neutral-900);
	margin-bottom: var(--spacing-8);
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-tight);
}

/* Section Container */
.cookies-rejected__section {
	margin-bottom: var(--spacing-8);
}

/* Paragraph Text */
.cookies-rejected__text {
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	color: var(--color-neutral-700);
	line-height: var(--line-height-relaxed);
	margin-bottom: var(--spacing-4);
}

/* Return Button */
.cookies-rejected__button {
	display: inline-block;
	padding: var(--spacing-3) var(--spacing-6);
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	color: var(--color-neutral-white);
	background-color: var(--color-primary-500);
	border: 2px solid var(--color-primary-500);
	border-radius: var(--radius-md);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--duration-200) ease;
	margin-top: var(--spacing-6);
}

.cookies-rejected__button:hover {
	background-color: var(--color-primary-700);
	border-color: var(--color-primary-700);
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.cookies-rejected__button:focus {
	outline: 2px solid var(--color-primary-500);
	outline-offset: 2px;
}

.cookies-rejected__button:active {
	background-color: var(--color-primary-800);
	border-color: var(--color-primary-800);
	transform: translateY(0);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ==============================================
   RESPONSIVE: TABLET (≥768px)
   ============================================== */
@media (min-width: 768px) {
	.cookies-rejected__container {
		padding: 0 var(--spacing-6);
	}

	.cookies-rejected__heading {
		font-size: var(--font-size-4xl);
	}

	.cookies-rejected__button {
		font-size: var(--font-size-lg);
		padding: var(--spacing-4) var(--spacing-8);
	}
}

/* ==============================================
   RESPONSIVE: DESKTOP (≥1024px)
   ============================================== */
@media (min-width: 1024px) {
	.cookies-rejected__container {
		padding: 0 var(--spacing-8);
	}

	.cookies-rejected__heading {
		font-size: var(--font-size-5xl);
		margin-bottom: var(--spacing-12);
	}

	.cookies-rejected__text {
		font-size: var(--font-size-lg);
	}

	.cookies-rejected__button {
		font-size: var(--font-size-xl);
		padding: var(--spacing-5) var(--spacing-10);
	}
}

/* ========================================
   GUTSCHEINE PAGE STYLES - US-010-001
   ======================================== */

/* ============================================================================
   GUTSCHEINE PAGE STYLES
   Mobile-first responsive design with BEM naming
   Implementation Date: 2025-10-25
   User Story: US-010-001
   Dependencies: Design system CSS variables (variables.css)
   ========================================================================= */

/* Root block - Gutscheine page container */
.gutscheine {
	/* Base styling will be expanded in US-010-002 and US-010-003 */
	/* This establishes the page-level BEM namespace only */
}

/* Main content container - responsive padding and max-width */
.gutscheine__container {
	max-width: 72rem; /* 1152px - standard content container width */
	margin: 0 auto; /* Center container horizontally */
	padding: var(--spacing-6); /* 1.5rem = 24px mobile base */
}

/* Responsive: Small Tablet (≥640px) */
@media (min-width: 640px) {
	.gutscheine__container {
		padding: var(--spacing-6); /* Maintain 24px on small tablets */
	}
}

/* Responsive: Tablet (≥768px) */
@media (min-width: 768px) {
	.gutscheine__container {
		padding: var(--spacing-8); /* 2rem = 32px tablet */
	}
}

/* Responsive: Desktop (≥1024px) */
@media (min-width: 1024px) {
	.gutscheine__container {
		padding: var(--spacing-12); /* 3rem = 48px desktop */
	}
}

/* Responsive: Large Desktop (≥1280px) */
@media (min-width: 1280px) {
	.gutscheine__container {
		padding: var(--spacing-12); /* Maintain 48px, max-width constrains */
	}
}

/* ============================================================================
   Hero Section Styles - US-010-002
   Background image hero with ComponentHeadline overlay
   Mobile-first responsive design with BEM naming
   Reference: BlogOverview hero pattern (blog-overview.css lines 44-95)
   ========================================================================= */

/* Background image modifier - Mobile first (< 768px) (AC1, AC4) */
/* Performance optimization: Mobile uses 480w image, tablet 768w, no 1200w (original is 1000px) */
.gutscheine__hero--with-image {
	background-image: url('/images/gutscheine/GutscheinHero-480w.webp');
	background-size: cover; /* Scale image proportionally to cover entire section (AC4) */
	background-position: center; /* Center focal point (AC4) */
	background-repeat: no-repeat; /* Display image once (AC4) */
	min-height: 250px; /* Mobile: 250px min-height (AC3) */
	position: relative; /* Position context for overlay */
	padding: var(--spacing-8) 0; /* 2rem = 32px mobile vertical padding - creates space above/below overlay */
}

/* Tablet: Load 768w responsive image (performance optimization) */
@media (min-width: 768px) {
	.gutscheine__hero--with-image {
		background-image: url('/images/gutscheine/GutscheinHero-768w.webp');
	}
}

/* Desktop: Load full-size image (1000px original) */
@media (min-width: 1024px) {
	.gutscheine__hero--with-image {
		background-image: url('/images/gutscheine/GutscheinHero.webp');
	}
}

/* Semi-transparent overlay for text contrast (AC1) */
.gutscheine__hero-overlay {
	background-color: var(--color-primary-500-overlay); /* 50% transparent wine red for text contrast */
	padding: var(--spacing-8) 0; /* 2rem = 32px mobile vertical padding (AC5) */
	min-height: inherit; /* Inherit min-height from parent (250px mobile) */
	display: flex;
	align-items: center; /* Vertically center ComponentHeadline */
}

/* Override ComponentHeadline text colors to white for readability (AC2, AC6) */
.gutscheine__hero--with-image .component-headline__tagline,
.gutscheine__hero--with-image .component-headline__heading {
	color: var(--color-neutral-white); /* White text on dark overlay (AC5) */
}

/* Override ComponentHeadline SVG divider color to white (AC2) */
.gutscheine__hero--with-image .component-headline__divider-svg {
	fill: var(--color-neutral-white); /* White SVG on dark overlay (AC5) */
}

/* Responsive: Tablet (768px-1023px) - AC3 */
@media (min-width: 768px) {
	.gutscheine__hero--with-image {
		min-height: 350px; /* Tablet: 350px min-height (AC3) */
		padding: var(--spacing-12) 0; /* 3rem = 48px tablet vertical padding */
	}

	.gutscheine__hero-overlay {
		padding: var(--spacing-12) 0; /* 3rem = 48px tablet vertical padding (AC5) */
	}
}

/* Responsive: Desktop (1024px+) - AC3 */
@media (min-width: 1024px) {
	.gutscheine__hero--with-image {
		min-height: 400px; /* Desktop: 400px min-height (AC3) */
		padding: var(--spacing-16) 0; /* 4rem = 64px desktop vertical padding (matches Blog page) */
	}

	.gutscheine__hero-overlay {
		padding: var(--spacing-16) 0; /* 4rem = 64px desktop vertical padding (matches Blog page) */
	}
}

/* ============================================================================
   Content Section Styles - US-010-003
   Introductory text and voucher images display
   Mobile-first responsive design with BEM naming
   Implementation Date: 2025-10-25
   ========================================================================= */

/* Introductory text paragraph (AC2) */
.gutscheine__intro {
	font-size: var(--font-size-lg); /* 18px - Large body text for emphasis */
	line-height: var(--line-height-relaxed); /* 1.75 - Comfortable reading */
	color: var(--color-neutral-700); /* Body text color */
	margin-bottom: var(--spacing-8); /* 32px spacing below text before images */
	text-align: center; /* Center text for visual balance */
}

/* Voucher images container - Mobile first (< 1024px) (AC3, AC6) */
.gutscheine__voucher-images {
	display: flex;
	flex-direction: column; /* Mobile: stack images vertically */
	gap: var(--spacing-6); /* 24px spacing between stacked images */
	align-items: center; /* Center images horizontally */
	margin: 0 auto; /* Center container */
}

/* Voucher image base styles (AC4, AC5) */
.gutscheine__voucher-image {
	max-width: 100%; /* Responsive sizing - never exceed container width */
	height: auto; /* Maintain aspect ratio when scaling */
	border: var(--border-width-thin, 1px) solid var(--color-neutral-700); /* Subtle border for definition */
	border-radius: var(--radius-md); /* 6px rounded corners for polish */
	display: block; /* Remove inline spacing */
}

/* Responsive: Desktop (≥ 1024px) - Side-by-side layout (AC6) */
@media (min-width: 1024px) {
	.gutscheine__voucher-images {
		flex-direction: row; /* Desktop: display images side-by-side */
		gap: var(--spacing-8); /* 32px spacing between side-by-side images */
		justify-content: center; /* Center images within container */
	}

	.gutscheine__voucher-image {
		max-width: 58%; /* Constrain each image to 58% of container width (~30% larger than 45%) */
	}
}

/* ========================================
   PREISE PAGE STYLES - US-011-001
   ======================================== */

/* ============================================================================
   PREISE PAGE STYLES
   Mobile-first responsive design with BEM naming
   Implementation Date: 2025-10-26
   User Story: US-011-001
   Dependencies: Design system CSS variables (variables.css)
   Reference: Gutscheine pattern (components.css lines 797-955)
   ========================================================================= */

/* Root block - Preise page container */
.preise {
	/* Base styling establishes page-level BEM namespace */
	background-color: var(--color-neutral-50); /* Light pink background matching WellnessBenefitsSection */
}

/* Main content container - responsive padding and max-width */
.preise__container {
	max-width: 72rem; /* 1152px - standard content container width */
	margin: 0 auto; /* Center container horizontally */
	padding: var(--spacing-6); /* 1.5rem = 24px mobile base */
}

/* Responsive: Small Tablet (≥640px) */
@media (min-width: 640px) {
	.preise__container {
		padding: var(--spacing-6); /* Maintain 24px on small tablets */
	}
}

/* Responsive: Tablet (≥768px) */
@media (min-width: 768px) {
	.preise__container {
		padding: var(--spacing-8); /* 2rem = 32px tablet */
	}
}

/* Responsive: Desktop (≥1024px) */
@media (min-width: 1024px) {
	.preise__container {
		padding: var(--spacing-12); /* 3rem = 48px desktop */
	}
}

/* Responsive: Large Desktop (≥1280px) */
@media (min-width: 1280px) {
	.preise__container {
		padding: var(--spacing-12); /* Maintain 48px, max-width constrains */
	}
}

/* ============================================================================
   Hero Section Styles - US-011-001
   Background image hero with ComponentHeadline overlay
   Mobile-first responsive design with BEM naming
   Reference: Gutscheine hero pattern (components.css lines 850-908)
   ========================================================================= */

/* Background image modifier - Mobile first (< 768px) */
/* Performance optimization: Mobile uses 480w image, tablet 768w, desktop 1200w */
.preise__hero--with-image {
	background-image: url('/images/preise/PreiseHero-480w.webp');
	background-size: cover; /* Scale image proportionally to cover entire section */
	background-position: center; /* Center focal point */
	background-repeat: no-repeat; /* Display image once */
	min-height: 250px; /* Mobile: 250px min-height */
	position: relative; /* Position context for overlay */
	padding: var(--spacing-8) 0; /* 2rem = 32px mobile vertical padding - creates space above/below overlay */
}

/* Tablet: Load 768w responsive image (performance optimization) */
@media (min-width: 768px) {
	.preise__hero--with-image {
		background-image: url('/images/preise/PreiseHero-768w.webp');
	}
}

/* Desktop: Load 1200w responsive image (performance optimization) */
@media (min-width: 1024px) {
	.preise__hero--with-image {
		background-image: url('/images/preise/PreiseHero-1200w.webp');
	}
}

/* Semi-transparent overlay for text contrast */
.preise__hero-overlay {
	background-color: var(--color-primary-500-overlay); /* 50% transparent wine red for text contrast */
	padding: var(--spacing-8) 0; /* 2rem = 32px mobile vertical padding */
	min-height: inherit; /* Inherit min-height from parent (250px mobile) */
	display: flex;
	align-items: center; /* Vertically center ComponentHeadline */
}

/* Override ComponentHeadline text colors to white for readability */
.preise__hero--with-image .component-headline__tagline,
.preise__hero--with-image .component-headline__heading {
	color: var(--color-neutral-white); /* White text on dark overlay */
}

/* Override ComponentHeadline SVG divider color to white */
.preise__hero--with-image .component-headline__divider-svg {
	fill: var(--color-neutral-white); /* White SVG on dark overlay */
}

/* Responsive: Tablet (768px-1023px) */
@media (min-width: 768px) {
	.preise__hero--with-image {
		min-height: 350px; /* Tablet: 350px min-height */
		padding: var(--spacing-12) 0; /* 3rem = 48px tablet vertical padding */
	}

	.preise__hero-overlay {
		padding: var(--spacing-12) 0; /* 3rem = 48px tablet vertical padding */
	}
}

/* Responsive: Desktop (1024px+) */
@media (min-width: 1024px) {
	.preise__hero--with-image {
		min-height: 400px; /* Desktop: 400px min-height */
		padding: var(--spacing-16) 0; /* 4rem = 64px desktop vertical padding (matches Blog page) */
	}

	.preise__hero-overlay {
		padding: var(--spacing-16) 0; /* 4rem = 64px desktop vertical padding (matches Blog page) */
	}
}

/* ========================================================================
   Preise: Pricing Cards Section
   ======================================================================== */

/* Pricing cards section wrapper */
.preise__cards-section {
	padding-top: var(--spacing-8);    /* 32px vertical spacing above cards */
	padding-bottom: var(--spacing-6); /* 24px vertical spacing below cards */
	background-color: transparent;     /* Inherits from .preise__container background */
}

@media (min-width: 768px) {
	.preise__cards-section {
		padding-top: var(--spacing-10);    /* 40px on tablet */
		padding-bottom: var(--spacing-8);  /* 32px on tablet */
	}
}

@media (min-width: 1024px) {
	.preise__cards-section {
		padding-top: var(--spacing-12);    /* 48px on desktop */
		padding-bottom: var(--spacing-10); /* 40px on desktop */
	}
}

/* ========================================
   US-011-004: PricingCtaSection Overrides in Preise Context

   Purpose: Reuse PricingCtaSection component in Preise.razor with context-specific styling
   Strategy: CSS overrides scoped to .preise__cards-section to maintain homepage independence
   Visual Goal: Pixel-perfect match with original .preise__card implementation (±2px tolerance)
   ======================================== */

/* Remove PricingCtaSection background when used in Preise page */
.preise__cards-section .pricing-cta-section {
	background-color: transparent; /* Remove neutral-200 (#F2E1E9) rosa background */
	padding: 0;                     /* Remove section padding (1.5rem/2.5rem/3rem responsive) */
	width: 100%;                    /* Full width within container */
}

/* Hide "Wählen Sie Ihr Angebot" heading in Preise context (page has its own hero heading) */
.preise__cards-section .pricing-cta-section__headline {
	display: none; /* Hide heading (visible on homepage, hidden on Preise page) */
}

/* Hide decorative leaf image in Preise context (cleaner page design) */
.preise__cards-section .pricing-cta-section__decorative-right {
	display: none; /* Hide leaf (visible on homepage desktop ≥1024px, hidden on Preise page) */
}

/* Override card border to match Preise aesthetic (lighter border, wine red accent) */
.preise__cards-section .pricing-cta-section__card {
	border: var(--border-width-medium) solid var(--color-neutral-200);        /* Lighter border: neutral-200 (#E6D4DC) vs original neutral-300 */
	border-bottom: var(--border-width-thick) solid var(--color-primary-500);  /* Wine red accent: primary-500 (#661652) vs original accent-main (#A65C94 rosa) */
}

/* Override card hover state to match Preise aesthetic */
.preise__cards-section .pricing-cta-section__card:hover {
	border-bottom-color: var(--color-primary-700); /* Darker wine red on hover: primary-700 (#480437) vs original accent-main (#A65C94) */
}

/* End US-011-004 Overrides */

/* ============================================================================
   Section Background Styles
   Consistent background colors across sections
   ========================================================================= */

/* WellnessBenefitsSection - Light pink background */
.wellness-benefits-section {
	background-color: var(--color-neutral-50); /* Light pink background #FFFBFD */
}

/* AboutSection - Light pink background matching WellnessBenefitsSection */
.about-section {
	background-color: var(--color-neutral-200);
}

/* ============================================================================
   reCAPTCHA Badge Visibility Fix - US-012-003
   Force Google reCAPTCHA v3 badge to remain visible for GDPR compliance
   Implementation Date: 2025-10-27
   User Story: US-012-003 - AC6: Privacy and GDPR Compliance

   ISSUE: Google's reCAPTCHA v3 script applies inline styles with negative
   right positioning (right: -186px) to hide the badge by default.

   SOLUTION: Use !important to override inline styles and force visibility.
   This ensures compliance with Google's terms requiring visible badge OR
   inline disclaimer text (we choose visible badge approach).

   GDPR COMPLIANCE: Badge visibility is required per Google's ToS when using
   reCAPTCHA v3 without inline disclaimer text.
   ========================================================================= */

.grecaptcha-badge {
	/* Override Google's inline style: right: -186px !important */
	right: 14px !important; /* Position badge 14px from right edge */
	bottom: 14px !important; /* Position badge 14px from bottom edge */

	/* Ensure badge stays visible */
	opacity: 1 !important;
	visibility: visible !important;
	display: block !important;

	/* z-index to ensure badge appears above page content */
	z-index: 1000 !important;
}

/* Responsive adjustment for mobile devices */
@media (max-width: 640px) {
	.grecaptcha-badge {
		/* Slightly adjust position on mobile to avoid overlap with cookie banner */
		bottom: 80px !important; /* Move up to avoid cookie banner (if present) */
	}
}

/* ============================================================================
   REVIEWS PAGE STYLES
   US-061: Create Reviews Page CSS Styling
   Implementation Date: 2025-10-30
   Dependencies: ComponentHeadline component, variables.css
   ============================================================================ */

/* Hero section - Mobile first (AC1) */
.reviews__hero {
	position: relative;
	width: 100%;
	padding: var(--spacing-8) 0; /* 32px mobile vertical padding */
}

/* Background image modifier (AC1) */
/* Performance optimization: Mobile uses 480w image, tablet 768w, no 1200w (original is 1000px) */
.reviews__hero--with-image {
	background-image: url('/images/rezessionen/RezessionenHero-480w.webp');
	background-size: cover; /* AC1: cover entire section */
	background-position: center; /* AC1: center focal point */
	background-repeat: no-repeat;
	min-height: 250px; /* Mobile: 250px (matches Preise page) */
	position: relative;
	padding: var(--spacing-8) 0; /* 32px mobile vertical padding (matches Preise page) */
}

/* Tablet: Load 768w responsive image (performance optimization) */
@media (min-width: 768px) {
	.reviews__hero--with-image {
		background-image: url('/images/rezessionen/RezessionenHero-768w.webp');
	}
}

/* Desktop: Load full-size image (1000px original) */
@media (min-width: 1024px) {
	.reviews__hero--with-image {
		background-image: url('/images/rezessionen/RezessionenHero.webp');
	}
}

/* Semi-transparent overlay (AC1) */
.reviews__hero-overlay {
	background-color: var(--color-primary-500-overlay); /* rgba(102, 22, 82, 0.5) */
	padding: var(--spacing-8) 0; /* 32px mobile */
	min-height: inherit;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Override ComponentHeadline colors for white text on overlay (AC1) */
.reviews__hero--with-image .component-headline__tagline,
.reviews__hero--with-image .component-headline__heading {
	color: var(--color-neutral-white);
}

.reviews__hero--with-image .component-headline__divider-svg {
	fill: var(--color-neutral-white);
}

/* Responsive: Tablet (768px-1023px) - AC1 */
@media (min-width: 768px) {
	.reviews__hero--with-image {
		min-height: 350px; /* Tablet: 350px (matches Preise page) */
		padding: var(--spacing-12) 0; /* 48px tablet vertical padding (matches Preise page) */
	}

	.reviews__hero-overlay {
		padding: var(--spacing-12) 0; /* 48px tablet */
	}
}

/* Responsive: Desktop (1024px+) - AC1 */
@media (min-width: 1024px) {
	.reviews__hero--with-image {
		min-height: 400px; /* Desktop: 400px (matches Preise page) */
		padding: var(--spacing-16) 0; /* 64px desktop vertical padding (matches Preise page) */
	}

	.reviews__hero-overlay {
		padding: var(--spacing-16) 0; /* 64px desktop */
	}
}

/* ============================================================================
   Reviews Page - Container and Layout
   ============================================================================ */

/* Main container (AC2) */
.reviews__container {
	background-color: var(--color-neutral-50); /* Light background */
	padding: var(--spacing-8) 0; /* 32px vertical */
	max-width: 1536px; /* 1536px max width */
	margin: 0 auto;
}

/* Layout container for grid + sidebar (AC2, AC4) */
.reviews__layout {
	display: grid;
	grid-template-columns: 1fr; /* Mobile/Tablet: single column (sidebar below) */
	gap: var(--spacing-8); /* 32px gap */
	padding: 0 var(--spacing-4); /* 16px horizontal padding mobile */
	max-width: 1536px;
	margin: 0 auto;
}

/* Desktop: 2-column layout (grid + sidebar) - AC4 */
@media (min-width: 1200px) {
	.reviews__layout {
		grid-template-columns: 1fr 350px; /* Main content + 350px sidebar */
		gap: var(--spacing-12); /* 48px gap desktop */
		padding: 0 var(--spacing-8); /* 32px horizontal padding desktop */
	}
}

/* ============================================================================
   Reviews Grid - Responsive Card Layout (AC2)
   ============================================================================ */

/* Grid container with responsive columns */
.reviews__grid {
	display: grid;
	grid-template-columns: 1fr; /* AC2: Mobile 1 column (< 768px) */
	gap: var(--spacing-8); /* AC2: 2rem (32px) spacing */
	width: 100%;
}

/* Tablet: 2 columns (768-1199px) - AC2 */
@media (min-width: 768px) {
	.reviews__grid {
		grid-template-columns: repeat(2, 1fr); /* AC2: 2 columns tablet */
	}
}

/* Desktop: 3 columns (≥1200px) - AC2 */
@media (min-width: 1200px) {
	.reviews__grid {
		grid-template-columns: repeat(3, 1fr); /* AC2: 3 columns desktop */
	}
}

/* ============================================================================
   Review Card Styling (AC3)
   ============================================================================ */

/* Individual review card */
.reviews__card {
	background-color: var(--color-neutral-white); /* AC3: White background */
	border: var(--border-width-thin) solid var(--color-neutral-200); /* AC3: Subtle border */
	border-radius: 8px; /* AC3: 8px rounded corners */
	padding: var(--spacing-6); /* AC3: 1.5rem padding (24px) */
	box-shadow: var(--shadow-card); /* AC3: Depth shadow */
	transition: transform var(--duration-200), box-shadow var(--duration-200);
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4); /* 16px internal spacing */
}

/* Card hover effect (AC3) */
.reviews__card:hover {
	transform: translateY(-4px); /* Subtle lift */
	box-shadow: var(--shadow-card-hover); /* Enhanced shadow on hover */
}

/* Star rating display (AC3) */
.reviews__card-rating {
	display: flex;
	gap: var(--spacing-1); /* 4px between stars */
	font-size: 1.2rem; /* Slightly larger star icons */
	color: #ffc107; /* Bootstrap warning/gold color for stars - already applied via .text-warning in HTML */
}

/* Review text (AC3) */
.reviews__card-text {
	font-size: var(--font-size-base); /* AC3: 1rem (16px) */
	line-height: var(--line-height-relaxed); /* 1.75 for readability */
	color: var(--color-neutral-900); /* Dark text */
	flex-grow: 1; /* Push author to bottom */
	margin: 0;
}

/* Customer name (AC3) */
.reviews__card-author {
	font-size: 0.9rem; /* AC3: Smaller (14.4px) */
	color: var(--color-neutral-700); /* AC3: Muted color */
	font-weight: var(--font-weight-semibold); /* 600 weight */
	text-align: right; /* Right-aligned attribution */
	margin: 0;
	margin-top: auto; /* Stick to bottom of card */
}

/* ============================================================================
   Sidebar - Top Reviews (AC4)
   ============================================================================ */

/* Sidebar container */
.reviews__sidebar {
	/* Mobile/Tablet: appears below grid (no special positioning) */
	width: 100%;
}

/* Desktop: sticky positioning (AC4) */
@media (min-width: 1200px) {
	.reviews__sidebar {
		position: sticky; /* AC4: Sticky positioning */
		top: 2rem; /* AC4: Stick 32px from top */
		align-self: start; /* Prevent stretching in grid */
	}
}

/* Sidebar heading (AC4) */
.reviews__sidebar-heading {
	font-family: var(--font-heading); /* Marcellus serif */
	font-size: var(--font-size-xl); /* 1.25rem = 20px */
	font-weight: var(--font-weight-bold); /* 700 */
	color: var(--color-primary-500); /* Wine red */
	margin-bottom: var(--spacing-6); /* 24px */
	padding-bottom: var(--spacing-3); /* 12px */
	border-bottom: var(--border-width-medium) solid var(--color-primary-500); /* AC4: Bottom border separator */
}

/* Sidebar list container (AC4) */
.reviews__sidebar-list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-6); /* 24px between items */
}

/* Individual sidebar item (AC4) */
.reviews__sidebar-item {
	padding: var(--spacing-4); /* 16px */
	background-color: var(--color-neutral-50); /* Light background */
	border-left: var(--border-width-thick) solid var(--color-primary-500); /* 3px left accent */
	border-radius: 4px;
	transition: background-color var(--duration-200), transform var(--duration-200);
}

/* Sidebar item hover effect (AC4) */
.reviews__sidebar-item:hover {
	background-color: var(--color-neutral-200); /* Darker on hover */
	transform: translateX(4px); /* Subtle right shift */
}

/* Sidebar item author name (AC4) */
.reviews__sidebar-author {
	font-weight: var(--font-weight-semibold); /* 600 */
	color: var(--color-neutral-900); /* Dark text */
	margin-bottom: var(--spacing-3); /* 12px */
	font-size: var(--font-size-base); /* 16px */
}

/* Sidebar item review text (AC4) */
.reviews__sidebar-text {
	font-size: 0.9rem; /* 14.4px - slightly smaller */
	color: var(--color-neutral-700); /* Muted text */
	line-height: var(--line-height-relaxed); /* 1.75 */
	margin: 0;
}

/* ============================================================================
   Reviews Page - State Styles
   ============================================================================ */

/* Error state container */
.reviews__error {
	max-width: 800px;
	margin: var(--spacing-8) auto; /* Center with vertical spacing */
	padding: 0 var(--spacing-4); /* Horizontal padding */
}

/* Empty state styling */
.reviews__empty-state {
	text-align: center;
	padding: var(--spacing-16) var(--spacing-8); /* 64px vertical, 32px horizontal */
	color: var(--color-neutral-700); /* Muted text */
	font-size: var(--font-size-lg); /* 18px */
}

/* ============================================================================
   HeroSection Enhancement - US-016-001
   Implementation Date: 2025-11-02
   User Story: US-016-001 - Homepage Content Expansion
   EPIC: EPIC-016 - Content Strategy & On-Page SEO
   
   ENHANCEMENT: Keyword-rich introductory paragraph below H1
   ============================================================================ */

.hero-section__intro {
    font-size: 1rem;
    line-height: 1.75;
    color: var(--color-neutral-900);
    max-width: 800px;
    margin: 0 auto 1.0625rem; /* Reduced from 2rem (32px) by 15px to 17px */
    text-align: justify; /* Blocksatz: rechts und linksbündig */
}

@media (min-width: 1024px) {
    .hero-section__intro {
        font-size: 1.125rem;
    }
}

/* ============================================================================
   ServiceOverviewSection - US-016-001
   Implementation Date: 2025-11-02
   User Story: US-016-001 - Homepage Content Expansion
   EPIC: EPIC-016 - Content Strategy & On-Page SEO
   
   FEATURES: 175-word service overview with keyword integration
   ============================================================================ */

.service-overview-section {
    padding: 2rem 0;
    background-color: var(--color-neutral-50);
    position: relative;
    z-index: 2; /* Above hero4 image (z-index: 1) */
}

.service-overview-section__content {
    margin: 0 auto;
}

.service-overview-section__content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-neutral-900);
    margin-bottom: 1.5rem;
    text-align: justify;
}

.service-overview-section__benefits {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.service-overview-section__benefits li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: var(--color-neutral-800);
}

.service-overview-section__benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary-500);
    font-weight: bold;
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .service-overview-section {
        padding: 3rem 0;
    }
}

@media (min-width: 1024px) {
    .service-overview-section {
        padding: 4rem 0;
    }
}

/* ============================================================================
   ThaiMassageEducationSection - US-016-001
   Implementation Date: 2025-11-02
   User Story: US-016-001 - Homepage Content Expansion
   EPIC: EPIC-016 - Content Strategy & On-Page SEO
   
   FEATURES: 350-word educational content with H3 subheadings
   ============================================================================ */

.thai-massage-education-section {
    padding: 3rem 0;
    background-color: var(--color-neutral-50);
}

.thai-massage-education-section__content {
    margin: 0 auto;
}

.thai-massage-education-section__content h3 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-primary-500);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.thai-massage-education-section__content h3:first-of-type {
    margin-top: 0;
}

.thai-massage-education-section__content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-neutral-900);
    margin-bottom: 1.5rem;
    text-align: justify;
}

.thai-massage-education-section__benefits {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.thai-massage-education-section__benefits li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: var(--color-neutral-800);
}

.thai-massage-education-section__benefits li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary-500);
    font-weight: bold;
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .thai-massage-education-section {
        padding: 5rem 0;
    }
    .thai-massage-education-section__content h3 {
        font-size: 1.75rem;
    }
}

@media (min-width: 1024px) {
    .thai-massage-education-section {
        padding: 6rem 0;
    }
    .thai-massage-education-section__content h3 {
        font-size: 2rem;
    }
}

/* ============================================================================
   SPA DISCOVERY SECTION
   Home Page - Spa Services Overview
   ============================================================================ */

.spa-discovery-section {
    padding: 3rem 0;
    background-color: var(--color-neutral-50);
}

.spa-discovery-section h2 {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--color-primary-500);
    margin-bottom: 2rem;
    text-align: center;
}

.spa-discovery-section__card {
    margin-bottom: 1.5rem;
    border: none;
    background-color: var(--color-neutral-white);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.spa-discovery-section__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.spa-discovery-section__icon-placeholder {
    font-size: 2.5rem;
    color: var(--color-primary-500);
    margin-bottom: 1rem;
    text-align: center;
}

.spa-discovery-section__card-title {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 400;
    color: var(--color-primary-500);
    margin-bottom: 0.75rem;
    text-align: center;
}

.spa-discovery-section__card-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-neutral-800);
    text-align: center;
}

@media (min-width: 768px) {
    .spa-discovery-section {
        padding: 4rem 0;
    }
    .spa-discovery-section h2 {
        font-size: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .spa-discovery-section {
        padding: 5rem 0;
    }
}

/* ========================================
   Service Detail Page Components
   US-016-002: Traditional Thai Massage with Oil
   ======================================== */

/* Hero Section */
.service-detail-hero {
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-neutral-50) 100%);
    padding: 3rem 0;
    text-align: center;
}

.service-detail-hero__container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.service-detail-hero__tagline {
    color: var(--color-primary-700);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.service-detail-hero__heading {
    color: var(--color-primary-900);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.service-detail-hero__intro {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-neutral-800);
    margin-bottom: 2rem;
}

.service-detail-hero__cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.service-detail-hero__phone {
    color: var(--color-neutral-700);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

/* Generic Section Container */
.service-detail-section {
    padding: 3rem 0;
}

.service-detail-section:nth-child(even) {
    background-color: var(--color-neutral-50);
}

.service-detail-section__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.service-detail-section__heading {
    color: var(--color-primary-900);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.service-detail-section__intro {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-neutral-700);
    margin-bottom: 2rem;
    text-align: center;
}

.service-detail-section__content {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-neutral-800);
}

.service-detail-section__content p {
    margin-bottom: 1.5rem;
}

.service-detail-section__content p:last-child {
    margin-bottom: 0;
}

.service-detail-section__image {
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: block;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
    .service-detail-section__image {
        float: right;
        margin-left: 2rem;
        margin-bottom: 1rem;
        max-width: 350px;
    }
}

@media (min-width: 1024px) {
    .service-detail-section__image {
        max-width: 400px;
    }
}

.service-detail-section__note {
    font-size: 0.875rem;
    color: var(--color-neutral-600);
    text-align: center;
    margin-top: 2rem;
    font-style: italic;
}

/* Benefits List */
.service-detail-section__benefits-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.service-detail-section__benefits-list li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: var(--color-neutral-800);
}

.service-detail-section__benefits-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-primary-500);
    font-weight: bold;
    font-size: 1.125rem;
}

/* Pricing Cards */
.service-detail-pricing {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.service-detail-pricing__card {
    background: var(--color-neutral-white);
    border: 2px solid var(--color-neutral-200);
    border-radius: 8px;
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}

.service-detail-pricing__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary-500);
}

.service-detail-pricing__card--recommended {
    border-color: var(--color-primary-500);
    border-width: 3px;
    box-shadow: 0 2px 8px rgba(102, 22, 82, 0.15);
}

.service-detail-pricing__badge {
    position: absolute;
    top: -12px;
    right: 1.5rem;
    background: var(--color-primary-500);
    color: var(--color-neutral-white);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.service-detail-pricing__duration {
    color: var(--color-primary-900);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.service-detail-pricing__description {
    color: var(--color-neutral-700);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.service-detail-pricing__price {
    color: var(--color-primary-700);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* FAQ Items */
.service-detail-faq {
    margin: 2rem 0;
}

.service-detail-faq__item {
    margin-bottom: 2rem;
}

.service-detail-faq__item:last-of-type {
    margin-bottom: 1.5rem;
}

.service-detail-faq__question {
    color: var(--color-primary-900);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.service-detail-faq__answer {
    color: var(--color-neutral-800);
    font-size: 1rem;
    line-height: 1.7;
    margin: 0;
}

.service-detail-faq__more {
    color: var(--color-neutral-700);
    font-size: 1rem;
    text-align: center;
    margin-top: 1.5rem;
}

.service-detail-faq__more a {
    color: var(--color-primary-700);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.service-detail-faq__more a:hover {
    color: var(--color-primary-900);
    text-decoration: underline;
}

/* CTA Section */
.service-detail-section--cta {
    background: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-neutral-50) 100%);
    text-align: center;
}

.service-detail-cta__trust {
    color: var(--color-primary-700);
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 1.5rem 0;
}

.service-detail-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
}

.service-detail-cta__phone {
    color: var(--color-neutral-700);
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

.service-detail-cta__links {
    font-size: 0.9375rem;
    color: var(--color-neutral-700);
    margin-top: 2rem;
}

.service-detail-cta__links a {
    color: var(--color-primary-700);
    text-decoration: none;
    transition: color 0.2s ease;
}

.service-detail-cta__links a:hover {
    color: var(--color-primary-900);
    text-decoration: underline;
}

/* Tablet Responsive (768px+) */
@media (min-width: 768px) {
    .service-detail-hero {
        padding: 4rem 0;
    }

    .service-detail-hero__heading {
        font-size: 2.5rem;
    }

    .service-detail-section {
        padding: 4rem 0;
    }

    .service-detail-section__heading {
        font-size: 2rem;
    }

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

/* Desktop Responsive (1024px+) */
@media (min-width: 1024px) {
    .service-detail-hero {
        padding: 5rem 0;
    }

    .service-detail-hero__heading {
        font-size: 3rem;
    }

    .service-detail-section {
        padding: 5rem 0;
    }

    .service-detail-section__heading {
        font-size: 2.25rem;
    }

    .service-detail-section__container {
        padding: 0 2rem;
    }

    .service-detail-pricing {
        grid-template-columns: repeat(4, 1fr);
    }

    .service-detail-hero__cta {
        flex-direction: row;
        justify-content: center;
    }

    .service-detail-cta__actions {
        flex-direction: row;
        justify-content: center;
    }
}

/* ============================================================================
   LocationMap Component
   US-016-008: Reusable SEO Components

   Implementation Date: 2025-11-02
   User Story: US-016-008
   EPIC: EPIC-016 - Content Strategy & On-Page SEO

   FEATURES:
   - Google Maps iframe embed with coordinate validation
   - Responsive heights: 300px (mobile), 350px (tablet), 400px (desktop), 450px (large)
   - Design system token compliance: CSS variables with fallbacks
   - BEM naming convention for maintainability
   - Error state for invalid coordinates
   - WCAG AAA contrast for error messages (7.2:1)

   DESIGN SYSTEM TOKENS:
   - Colors: --color-primary-700 (error text), --color-error-light (error bg), --color-neutral-300 (error border)
   - Spacing: --spacing-4, --spacing-6, --spacing-8 (vertical margins)
   - Border Radius: --border-radius-lg (8px container rounding)
   - Typography: --font-size-sm (error message)
   - Shadow: Wine red tint (rgba(102, 22, 82, 0.08)) for brand cohesion

   BEM NAMING CONVENTION:
   - Block: .location-map
   - Elements: __iframe, __error-message
   - Modifiers: --error

   RESPONSIVE BREAKPOINTS:
   - Mobile (<640px): 300px height, 1rem vertical margin
   - Tablet (640px-1023px): 350px height, 1.5rem vertical margin
   - Desktop (1024px+): 400px height, 2rem vertical margin
   - Large Desktop (1280px+): 450px height

   ACCESSIBILITY:
   - WCAG AAA contrast: Error text #480437 on #F9E6F1 background (7.2:1)
   - iframe title attribute for screen readers (MarkerTitle or Address)
   - iframe aria-label with descriptive location text
   - Keyboard accessible (native iframe focus behavior)
   ============================================================================ */

/* Block: location-map */
.location-map {
    width: 100%;
    margin: var(--spacing-4, 1rem) 0;
    border-radius: var(--border-radius-lg, 8px);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(102, 22, 82, 0.08);
}

/* Element: iframe */
.location-map__iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

/* Modifier: error state */
.location-map--error {
    background-color: var(--color-error-light, #F9E6F1);
    border: 1px solid var(--color-neutral-300, #E8D3DD);
    padding: var(--spacing-4, 1rem);
    text-align: center;
    box-shadow: none;
}

/* Element: error message */
.location-map__error-message {
    color: var(--color-primary-700, #480437);
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
}

/* Mobile responsiveness (<640px) */
@media (max-width: 640px) {
    .location-map {
        margin: var(--spacing-4, 1rem) 0;
    }

    .location-map__iframe {
        height: 300px;
    }
}

/* Tablet responsiveness (640px-1023px) */
@media (min-width: 640px) and (max-width: 1023px) {
    .location-map {
        margin: var(--spacing-6, 1.5rem) 0;
    }

    .location-map__iframe {
        height: 350px;
    }
}

/* Desktop responsiveness (1024px+) */
@media (min-width: 1024px) {
    .location-map {
        margin: var(--spacing-8, 2rem) 0;
    }

    .location-map__iframe {
        height: 400px;
    }
}

/* Large desktop (1280px+) */
@media (min-width: 1280px) {
    .location-map__iframe {
        height: 450px;
    }
}

/* ============================================================================
   Thai Massage Floridsdorf Location Page
   US-016-003: Location Page - Thai Massage Floridsdorf

   Implementation Date: 2025-11-02
   User Story: US-016-003
   EPIC: EPIC-016 - Content Strategy & On-Page SEO

   FEATURES:
   - SEO-optimized location landing page for "Thai Massage Floridsdorf"
   - 5-section structure: Hero, Transport, Services, Why Choose Us, Location
   - Conversion-focused CTAs (above fold + bottom)
   - LocationMap component integration
   - Responsive design: Mobile-first with 4 breakpoints

   BEM NAMING CONVENTION:
   - Block: .floridsdorf-location
   - Elements: __hero, __cta-primary, __transport, __services, __why-choose, __map-section, __contact-info, __cta-secondary

   RESPONSIVE BREAKPOINTS:
   - Mobile (<768px): Single column, 16px font, 30px/24px headings
   - Tablet (768px-1023px): Single column, 18px font, 36px/28px headings
   - Desktop (1024px+): Max-width container, 18px font, 48px/32px headings
   - Large Desktop (1536px+): Enhanced spacing

   ACCESSIBILITY:
   - WCAG AA contrast ratios (4.5:1+ text, 3:1+ CTAs)
   - Touch-friendly CTAs: 44x44px minimum (AC10)
   - Semantic HTML support (h1, h2, section, a)
   ============================================================================ */

/* Container - max-width container for content */
.floridsdorf-location {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing-8) var(--spacing-4);
}

/* Hero Section - Above fold with primary CTA */
.floridsdorf-location__hero {
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.floridsdorf-location__hero-heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl); /* 30px mobile */
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-4);
}

.floridsdorf-location__hero-paragraph {
    font-family: var(--font-body);
    font-size: var(--font-size-base); /* 16px mobile */
    color: var(--color-neutral-900);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-6);
}

/* Primary CTA Button - Above fold (AC9) */
.floridsdorf-location__cta-primary {
    display: inline-block;
    padding: var(--spacing-3) var(--spacing-8);
    min-width: 44px;
    min-height: 44px; /* Touch-friendly AC10 */
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--cookie-banner-accept-color);
    background-color: var(--cookie-banner-accept-bg);
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--duration-200) ease;
}

.floridsdorf-location__cta-primary:hover,
.floridsdorf-location__cta-primary:focus {
    background-color: var(--cookie-banner-accept-hover-bg);
    text-decoration: none;
}

/* Transport Section */
.floridsdorf-location__transport {
    margin-bottom: var(--spacing-12);
}

.floridsdorf-location__transport-heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl); /* 20px mobile */
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-4);
}

.floridsdorf-location__transport p,
.floridsdorf-location__transport ul {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
}

.floridsdorf-location__transport ul {
    padding-left: var(--spacing-6);
}

.floridsdorf-location__transport li {
    margin-bottom: var(--spacing-2);
}

/* Transport Section Subheadings (H3) - Multi-area transport categories */
.floridsdorf-location__transport-subheading {
    font-family: var(--font-heading);
    font-size: var(--font-size-lg); /* 18px mobile */
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-500);
    line-height: var(--line-height-tight);
    margin-top: var(--spacing-6);
    margin-bottom: var(--spacing-3);
}

/* Services Section */
.floridsdorf-location__services {
    margin-bottom: var(--spacing-12);
}

.floridsdorf-location__services-heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-4);
}

.floridsdorf-location__services p {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
}

.floridsdorf-location__services ul {
    padding-left: var(--spacing-6);
    margin-bottom: var(--spacing-4);
}

.floridsdorf-location__services li {
    margin-bottom: var(--spacing-2);
}

.floridsdorf-location__services-link {
    color: var(--color-primary-500);
    text-decoration: underline;
    font-weight: var(--font-weight-semibold);
}

.floridsdorf-location__services-link:hover,
.floridsdorf-location__services-link:focus {
    color: var(--color-primary-600);
}

/* Why Choose Us Section */
.floridsdorf-location__why-choose {
    margin-bottom: var(--spacing-12);
}

.floridsdorf-location__why-choose-heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-4);
}

.floridsdorf-location__why-choose p {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    line-height: var(--line-height-relaxed);
}

/* Map Section */
.floridsdorf-location__map-section {
    margin-bottom: var(--spacing-12);
}

.floridsdorf-location__map-heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-4);
}

.floridsdorf-location__map-description {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-6);
}

.floridsdorf-location__map-link-wrapper {
    margin-top: var(--spacing-4);
    text-align: center;
}

.floridsdorf-location__map-link {
    display: inline-block;
    padding: var(--spacing-2) var(--spacing-6);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    text-decoration: underline;
}

.floridsdorf-location__map-link:hover,
.floridsdorf-location__map-link:focus {
    color: var(--color-primary-600);
}

/* Contact Info Section */
.floridsdorf-location__contact-info {
    margin-bottom: var(--spacing-8);
    padding: var(--spacing-6);
    background-color: var(--color-neutral-50);
    border-radius: var(--radius-md);
}

.floridsdorf-location__contact-info p {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-2);
}

.floridsdorf-location__contact-link {
    color: var(--color-primary-500);
    text-decoration: underline;
    font-weight: var(--font-weight-semibold);
}

.floridsdorf-location__contact-link:hover {
    color: var(--color-primary-600);
}

/* Contact Info Emphasis - Weinrot italic text */
.floridsdorf-location__contact-emphasis {
    color: var(--color-primary-500);
    font-style: italic;
}

/* Secondary CTA - Bottom of page (AC9) */
.floridsdorf-location__cta-secondary {
    display: inline-block;
    padding: var(--spacing-3) var(--spacing-8);
    min-width: 44px;
    min-height: 44px; /* Touch-friendly AC10 */
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--cookie-banner-accept-color);
    background-color: var(--cookie-banner-accept-bg);
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: background-color var(--duration-200) ease;
    margin-top: var(--spacing-4);
}

.floridsdorf-location__cta-secondary:hover,
.floridsdorf-location__cta-secondary:focus {
    background-color: var(--cookie-banner-accept-hover-bg);
    text-decoration: none;
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* Tablet (768px - 1023px) - AC10 */
@media (min-width: 768px) {
    .floridsdorf-location {
        padding: var(--spacing-12) var(--spacing-6);
    }

    .floridsdorf-location__hero-heading {
        font-size: var(--font-size-4xl); /* 36px tablet */
    }

    .floridsdorf-location__hero-paragraph {
        font-size: var(--font-size-lg); /* 18px tablet */
    }

    .floridsdorf-location__transport-heading,
    .floridsdorf-location__services-heading,
    .floridsdorf-location__why-choose-heading,
    .floridsdorf-location__map-heading {
        font-size: var(--font-size-2xl); /* 28px tablet */
    }

    .floridsdorf-location__transport-subheading {
        font-size: var(--font-size-xl); /* 20px tablet */
    }
}

/* Desktop (1024px - 1535px) - AC10 */
@media (min-width: 1024px) {
    .floridsdorf-location {
        padding: var(--spacing-16) var(--spacing-8);
    }

    .floridsdorf-location__hero-heading {
        font-size: var(--font-size-5xl); /* 48px desktop */
    }

    .floridsdorf-location__transport-heading,
    .floridsdorf-location__services-heading,
    .floridsdorf-location__why-choose-heading,
    .floridsdorf-location__map-heading {
        font-size: var(--font-size-heading-h2-desktop); /* 32px desktop */
    }

    .floridsdorf-location__transport-subheading {
        font-size: var(--font-size-2xl); /* 24px desktop */
        margin-top: var(--spacing-8);
    }
}

/* Large Desktop (1536px+) - AC10 */
@media (min-width: 1536px) {
    .floridsdorf-location {
        padding: var(--spacing-20) var(--spacing-12);
    }

    .floridsdorf-location__hero {
        margin-bottom: var(--spacing-16);
    }
}

/* =============================================================================
   FAQ Page Component (HaeufigeFragen)
   US-016-006: FAQ Page with Schema Markup

   Implementation Date: 2025-11-03
   User Story: US-016-006
   EPIC: EPIC-016 - Content Strategy & On-Page SEO

   FEATURES:
   - Comprehensive FAQ page with 26 questions across 6 categories
   - Table of contents with jump links for easy navigation
   - Mobile-responsive design with HTML5 details/summary accordion
   - BEM naming convention with faq-page block
   - 100% design token usage (zero hardcoded values)
   - Reuses existing .faq-section accordion styles from main.css
   - WCAG 2.1 Level AA compliant

   BEM NAMING CONVENTION:
   - Block: .faq-page
   - Elements: __hero, __hero-overlay, __toc, __toc-heading, __toc-nav, 
     __toc-list, __toc-item, __toc-link, __category-header, __content, __link
   - Modifiers: __hero--with-image

   RESPONSIVE BREAKPOINTS:
   - Mobile (< 640px): Vertical TOC, 250px hero height
   - Tablet (640px-1023px): Horizontal TOC, 350px hero height
   - Desktop (≥ 1024px): Full layout, 400px hero height
   ============================================================================= */

/* Hero Section */
.faq-page__hero {
    position: relative;
    width: 100%;
    min-height: 250px; /* Mobile */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.faq-page__hero--with-image {
    background-image: url('/images/faq/faq-hero.webp');
}

.faq-page__hero-overlay {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--color-primary-500-overlay); /* Wine red overlay with 50% opacity */
    padding: var(--spacing-8) 0;
    color: var(--color-neutral-white);
}

/* Table of Contents */
.faq-page__toc {
    padding: var(--spacing-8) 0;
    background-color: var(--color-neutral-white);
    border-bottom: 1px solid var(--color-neutral-200);
}

.faq-page__toc-heading {
    font-family: var(--font-heading);
    font-size: 1.5rem; /* 24px mobile */
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-500);
    margin-bottom: var(--spacing-4);
    text-align: center;
}

.faq-page__toc-nav {
    /* Navigation container - no specific styles needed */
}

.faq-page__toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column; /* Mobile: vertical */
    gap: var(--spacing-2);
}

.faq-page__toc-item {
    /* List item wrapper - no specific styles needed */
}

.faq-page__toc-link {
    display: block;
    padding: var(--spacing-3) var(--spacing-4);
    background-color: var(--color-neutral-50);
    color: var(--color-primary-500);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background-color 0.3s ease, color 0.3s ease;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.faq-page__toc-link:hover,
.faq-page__toc-link:focus {
    background-color: var(--color-primary-500);
    color: var(--color-neutral-white);
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* FAQ Content Section */
.faq-page__content {
    padding: var(--spacing-8) 0;
    background-color: var(--color-neutral-white);
}

/* Category Headers (H2) */
.faq-page__category-header {
    font-family: var(--font-heading);
    font-size: 1.875rem; /* 30px mobile */
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-500);
    line-height: 1.3;
    margin-top: var(--spacing-10); /* 40px separation between categories */
    margin-bottom: var(--spacing-6); /* 24px before FAQ items */
    padding-top: var(--spacing-4); /* Jump link scroll offset */
    text-align: left;
}

.faq-page__category-header:first-of-type {
    margin-top: var(--spacing-8); /* Less spacing for first category */
}

/* Internal Links in FAQ Answers */
.faq-page__link {
    color: var(--color-primary-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    transition: color 0.3s ease, text-decoration-thickness 0.2s ease;
}

.faq-page__link:hover,
.faq-page__link:focus {
    color: var(--color-primary-500);
    text-decoration-thickness: 2px;
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

.faq-page__link:active {
    color: var(--color-primary-700);
}

/* Tablet and larger (≥ 640px) */
@media (min-width: 640px) {
    .faq-page__hero {
        min-height: 350px; /* Tablet hero height */
    }

    .faq-page__toc-list {
        flex-direction: row; /* Horizontal layout */
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-3);
    }

    .faq-page__toc-link {
        min-width: 200px; /* Consistent width for horizontal layout */
        text-align: center;
    }

    .faq-page__category-header {
        font-size: 2.25rem; /* 36px tablet */
    }
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
    .faq-page__hero {
        min-height: 400px; /* Desktop hero height */
    }

    .faq-page__toc-heading {
        font-size: 2.25rem; /* 36px desktop */
    }

    .faq-page__toc-list {
        gap: var(--spacing-4);
    }

    .faq-page__category-header {
        font-size: 2.75rem; /* 44px desktop */
    }
}
/* ============================================================================
   AUTHORITY PAGE (Was ist Thai Massage)
   ============================================================================

   Purpose: Long-form authority content page with 9 sections
   Route: /was-ist-thai-massage
   Pattern: BEM naming (.authority-page__element)
   Responsive: Mobile-first (320px → 768px → 1024px → 1536px)

   Sections:
   - Hero section with ComponentHeadline
   - Introduction with lead text and secondary CTA
   - 9 content sections (history, techniques, benefits, flow, comparison, suitability, FAQ, conclusion)
   - Comparison table (horizontal scroll on mobile)
   - FAQ preview items
   - Primary CTA in conclusion with trust signals

   Structure:
   - Block: .authority-page
   - Elements: __hero, __intro, __section, __comparison-table, __faq-preview, __conclusion
   - Modifiers: None

   ============================================================================ */

/* ============================================================================
   BASE AUTHORITY PAGE
   ============================================================================ */

.authority-page {
	background-color: var(--color-neutral-white);
}

/* ============================================================================
   HERO SECTION
   ============================================================================ */

.authority-page__hero {
	background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
	padding: var(--spacing-16) 0 var(--spacing-12);
	text-align: center;
}

/* Background image modifier for hero section */
.authority-page__hero--with-image {
	background-image: url('/images/authority/was-ist-thai-massage-hero.webp');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 250px;
	position: relative;
	padding: 0; /* Remove direct padding, handled by overlay */
}

/* Semi-transparent overlay for text contrast */
.authority-page__hero-overlay {
	background-color: rgba(102, 22, 82, 0.5); /* 50% wine red */
	padding: var(--spacing-8) 0;
	min-height: inherit;
	display: flex;
	align-items: center;
}

/* Override ComponentHeadline colors to white for readability */
.authority-page__hero--with-image .component-headline__tagline,
.authority-page__hero--with-image .component-headline__heading {
	color: var(--color-neutral-white);
}

/* Override ComponentHeadline SVG divider color to white */
.authority-page__hero--with-image .component-headline__divider-svg {
	fill: var(--color-neutral-white);
}

/* Responsive: Tablet (640-1023px) */
@media (min-width: 640px) {
	.authority-page__hero--with-image {
		min-height: 350px;
	}

	.authority-page__hero-overlay {
		padding: var(--spacing-12) 0;
	}
}

/* Responsive: Desktop (1024px+) */
@media (min-width: 1024px) {
	.authority-page__hero--with-image {
		min-height: 400px;
	}

	.authority-page__hero-overlay {
		padding: var(--spacing-16) 0;
	}
}

/* ============================================================================
   INTRODUCTION SECTION
   ============================================================================ */

.authority-page__intro {
	padding: var(--spacing-12) 0;
	background-color: var(--color-neutral-50);
}

.authority-page__intro .container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 var(--spacing-4);
}

.authority-page__lead {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-relaxed);
	color: var(--color-neutral-900);
	margin-bottom: var(--spacing-6);
	font-weight: var(--font-weight-semibold);
}

.authority-page__intro p {
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-neutral-700);
	margin-bottom: var(--spacing-6);
}

.authority-page__cta-secondary {
	margin-top: var(--spacing-8);
	text-align: center;
}

/* ============================================================================
   CONTENT SECTIONS
   ============================================================================ */

.authority-page__section {
	padding: var(--spacing-12) 0;
	border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
}

.authority-page__section:last-of-type {
	border-bottom: none;
}

.authority-page__section .container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 var(--spacing-4);
}

.authority-page__section h2 {
	font-family: var(--font-heading);
	font-size: var(--font-size-3xl);
	line-height: var(--line-height-tight);
	color: var(--color-primary-500);
	margin-bottom: var(--spacing-6);
	font-weight: var(--font-weight-bold);
}

.authority-page__section h3 {
	font-family: var(--font-heading);
	font-size: var(--font-size-xl);
	line-height: var(--line-height-tight);
	color: var(--color-neutral-900);
	margin-top: var(--spacing-8);
	margin-bottom: var(--spacing-4);
	font-weight: var(--font-weight-semibold);
}

.authority-page__section p {
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-neutral-700);
	margin-bottom: var(--spacing-6);
}

.authority-page__section ul {
	margin-bottom: var(--spacing-6);
	padding-left: var(--spacing-6);
}

.authority-page__section li {
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-neutral-700);
	margin-bottom: var(--spacing-3);
}

/* ============================================================================
   BENEFITS LIST (Section 4)
   ============================================================================ */

.authority-page__benefits-list {
	list-style: none;
	padding-left: 0;
}

.authority-page__benefits-list li {
	position: relative;
	padding-left: var(--spacing-6);
	margin-bottom: var(--spacing-4);
}

.authority-page__benefits-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: #36771A; /* Green checkmark */
	font-weight: var(--font-weight-bold);
	font-size: var(--font-size-lg);
}

/* ============================================================================
   DURATION LIST (Section 5)
   ============================================================================ */

.authority-page__duration-list {
	list-style: none;
	padding-left: 0;
}

.authority-page__duration-list li {
	padding-left: var(--spacing-2);
	margin-bottom: var(--spacing-4);
}

/* ============================================================================
   CAUTION LIST (Section 7)
   ============================================================================ */

.authority-page__caution-list {
	list-style: none;
	padding-left: 0;
}

.authority-page__caution-list li {
	position: relative;
	padding-left: var(--spacing-6);
	margin-bottom: var(--spacing-4);
}

.authority-page__caution-list li::before {
	content: '⚠';
	position: absolute;
	left: 0;
	font-size: var(--font-size-lg);
}

/* ============================================================================
   COMPARISON TABLE (Section 6)
   ============================================================================ */

.authority-page__comparison-table-wrapper {
	overflow-x: auto;
	margin: var(--spacing-8) 0;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.authority-page__comparison-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--color-neutral-white);
	font-size: var(--font-size-base);
	min-width: 600px; /* Force horizontal scroll on mobile */
}

.authority-page__comparison-table thead {
	background-color: var(--color-primary-500);
	color: var(--color-neutral-white);
}

.authority-page__comparison-table th {
	padding: var(--spacing-4);
	text-align: left;
	font-weight: var(--font-weight-semibold);
	border-bottom: var(--border-width-medium) solid var(--color-primary-700);
}

.authority-page__comparison-table td {
	padding: var(--spacing-4);
	border-bottom: var(--border-width-thin) solid var(--color-neutral-200);
	color: var(--color-neutral-700);
}

.authority-page__comparison-table tbody tr:hover {
	background-color: var(--color-neutral-50);
	transition: background-color var(--transition-normal);
}

.authority-page__comparison-table tbody tr:first-child {
	background-color: rgba(102, 22, 82, 0.05); /* Light wine red tint for Thai Massage row */
}

/* ============================================================================
   FAQ PREVIEW (Section 8)
   ============================================================================ */

.authority-page__faq-preview {
	margin: var(--spacing-8) 0;
}

.authority-page__faq-item {
	border-left: var(--border-width-thick) solid #A65C94; /* Rosa accent */
	padding-left: var(--spacing-4);
	margin-bottom: var(--spacing-6);
}

.authority-page__faq-item h3 {
	font-family: var(--font-heading);
	font-size: var(--font-size-lg);
	color: var(--color-neutral-900);
	margin-top: 0;
	margin-bottom: var(--spacing-2);
	font-weight: var(--font-weight-semibold);
}

.authority-page__faq-item p {
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-neutral-700);
	margin-bottom: 0;
}

.authority-page__faq-link {
	text-align: center;
	margin-top: var(--spacing-8);
}

/* ============================================================================
   CONCLUSION & CTA (Section 9)
   ============================================================================ */

.authority-page__conclusion {
	padding: var(--spacing-12) 0;
	background: linear-gradient(135deg, var(--color-primary-500) 0%, var(--color-primary-700) 100%);
	color: var(--color-neutral-white);
}

.authority-page__conclusion .container {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 var(--spacing-4);
}

.authority-page__conclusion h2 {
	font-family: var(--font-heading);
	font-size: var(--font-size-3xl);
	color: var(--color-neutral-white);
	margin-bottom: var(--spacing-6);
	text-align: center;
}

.authority-page__conclusion p {
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	color: var(--color-neutral-white);
	margin-bottom: var(--spacing-6);
}

.authority-page__trust-signals {
	background-color: rgba(255, 255, 255, 0.1);
	border-radius: var(--radius-md);
	padding: var(--spacing-6);
	margin: var(--spacing-8) 0;
}

.authority-page__trust-signals ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.authority-page__trust-signals li {
	font-size: var(--font-size-base);
	color: var(--color-neutral-white);
	margin-bottom: var(--spacing-3);
	font-weight: var(--font-weight-semibold);
}

.authority-page__cta-primary {
	background-color: var(--color-neutral-white);
	border-radius: var(--radius-md);
	padding: var(--spacing-8);
	text-align: center;
	box-shadow: var(--shadow-card);
}

.authority-page__cta-primary h3 {
	font-family: var(--font-heading);
	font-size: var(--font-size-2xl);
	color: var(--color-primary-500);
	margin-top: 0;
	margin-bottom: var(--spacing-4);
}

.authority-page__cta-primary p {
	font-size: var(--font-size-base);
	color: var(--color-neutral-700);
	margin-bottom: var(--spacing-6);
}

.authority-page__cta-buttons {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-4);
	margin-bottom: var(--spacing-6);
}

.authority-page__cta-links {
	font-size: var(--font-size-base);
	color: var(--color-neutral-700);
	margin-bottom: 0;
}

.authority-page__cta-links a {
	color: var(--color-primary-500);
	text-decoration: none;
	font-weight: var(--font-weight-semibold);
}

.authority-page__cta-links a:hover,
.authority-page__cta-links a:focus {
	text-decoration: underline;
}

/* ============================================================================
   LINKS
   ============================================================================ */

.authority-page__internal-link {
	color: var(--color-primary-500);
	text-decoration: none;
	font-weight: var(--font-weight-semibold);
	transition: color var(--transition-normal);
}

.authority-page__internal-link:hover,
.authority-page__internal-link:focus {
	color: var(--color-primary-700);
	text-decoration: underline;
}

.authority-page__external-link {
	color: var(--color-primary-500);
	text-decoration: none;
	font-weight: var(--font-weight-semibold);
}

.authority-page__external-link:hover,
.authority-page__external-link:focus {
	text-decoration: underline;
}

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
	.authority-page__hero {
		padding: var(--spacing-20) 0 var(--spacing-16);
	}

	.authority-page__intro .container,
	.authority-page__section .container,
	.authority-page__conclusion .container {
		padding: 0 var(--spacing-8);
	}

	.authority-page__lead {
		font-size: var(--font-size-xl);
	}

	.authority-page__section h2 {
		font-size: var(--font-size-4xl);
	}

	.authority-page__section h3 {
		font-size: var(--font-size-2xl);
	}

	.authority-page__cta-buttons {
		flex-direction: row;
		justify-content: center;
	}

	.authority-page__comparison-table {
		font-size: var(--font-size-base);
	}
}

/* Desktop (≥ 1024px) */
@media (min-width: 1024px) {
	.authority-page__intro .container,
	.authority-page__section .container,
	.authority-page__conclusion .container {
		max-width: 1000px;
	}

	.authority-page__section h2 {
		font-size: var(--font-size-5xl);
	}

	.authority-page__comparison-table {
		min-width: 100%; /* Full width on desktop, no forced scroll */
	}
}

/* Large Desktop (≥ 1536px) */
@media (min-width: 1536px) {
	.authority-page__intro .container,
	.authority-page__section .container,
	.authority-page__conclusion .container {
		max-width: 1200px;
	}
}

/* ============================================================================
   Blog News Section - US-023-001
   Consolidated from blog-news-section.css per EPIC-049 CSS Architecture
   ============================================================================ */

/* Blog News Section
   ========================================================================== */

.blog-news-section {
    padding: var(--spacing-8) 0 var(--spacing-16);
    background-color: var(--color-neutral-50);
}

/* Remove text decoration from blog tile links */
.blog-news-section__scroll-item a {
    text-decoration: none !important;
}

/* Card Styles */
.blog-news-section__card {
    height: 100%;
    border: 1px solid var(--color-neutral-200);
    border-radius: var(--border-radius-lg);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    background-color: var(--color-neutral-white);
    margin-bottom: 0;
    overflow: hidden;
}

.blog-news-section__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.blog-news-section__image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.blog-news-section__card .card-body {
    padding: var(--spacing-6);
    display: flex;
    flex-direction: column;
    min-height: auto;
    justify-content: space-between;
    position: relative;
    padding-bottom: calc(0.5rem + 1.5rem);
}

.blog-news-section__title {
    font-family: var(--font-body);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-900);
    margin-bottom: var(--spacing-4);
    line-height: var(--line-height-snug);
    margin-top: 0;
    text-decoration: none;
}

.blog-news-section__excerpt {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
    flex-grow: 0;
    text-decoration: none;
}

.blog-news-section__meta {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-neutral-500);
    margin-bottom: 0;
    text-decoration: none;
    text-align: left;
    position: absolute;
    bottom: 0.5rem;
    left: var(--spacing-6);
    right: var(--spacing-6);
}

/* Horizontal Scroll Layout - Carousel Wrapper */
.blog-news-section__carousel {
    position: relative;
    width: 100%;
    overflow: visible;
}

/* Horizontal Scroll Layout - Scroll Container */
.blog-news-section__scroll-container {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--spacing-6);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--spacing-4);
    scrollbar-width: none;
}

/* Add spacer at the end to prevent last tile from being cut off */
.blog-news-section__scroll-container::after {
    content: '';
    flex: 0 0 var(--spacing-6);
    height: 1px;
}

/* Hide native scrollbar (Webkit browsers) */
.blog-news-section__scroll-container::-webkit-scrollbar {
    display: none;
}

/* Horizontal Scroll Layout - Scroll Item (Mobile Base) */
.blog-news-section__scroll-item {
    flex: 0 0 270px;
    min-height: 100%;
}

/* Responsive adjustments - Mobile First */
@media (max-width: 767px) {
    .blog-news-section {
        padding: var(--spacing-12) 0;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet: 2 tiles visible */
    .blog-news-section__scroll-item {
        flex: 0 0 330px;
    }
}

@media (min-width: 1024px) {
    /* Desktop: 3 tiles visible */
    .blog-news-section__scroll-item {
        flex: 0 0 350px;
    }
}

/* Navigation Buttons - Base Styles */
.blog-news-section__nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background-color: var(--color-neutral-white);
    border: none;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    color: var(--color-primary-900);
    opacity: 0;
    transition: all var(--transition-normal);
}

/* Show buttons on carousel hover */
.blog-news-section__carousel:hover .blog-news-section__nav-button {
    opacity: 1;
}

.blog-news-section__nav-button--left {
    left: calc(-48px - var(--spacing-4));
}

.blog-news-section__nav-button--right {
    right: calc(-48px - var(--spacing-4));
}

.blog-news-section__nav-button:hover:not([aria-disabled="true"]) {
    transform: translateY(-50%) scale(1.05);
    box-shadow: var(--shadow-lg);
    background-color: var(--color-primary-900);
    color: var(--color-neutral-white);
}

.blog-news-section__nav-button[aria-disabled="true"] {
    opacity: var(--opacity-50);
    cursor: not-allowed;
    pointer-events: none;
}

.blog-news-section__nav-button:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* Responsive - Show buttons on mobile with adjusted positioning */
@media (max-width: 767px) {
    .blog-news-section__nav-button {
        opacity: 1; /* Always visible, no hover state on touch devices */
    }

    .blog-news-section__nav-button--left {
        left: var(--spacing-2); /* 8px from left edge, inside container */
    }

    .blog-news-section__nav-button--right {
        right: var(--spacing-2); /* 8px from right edge, inside container */
    }
}

/* View All Link Container
   ========================================================================== */

.blog-news-section__view-all-container {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-8);
    padding: 0 var(--spacing-4);
}

.blog-news-section__view-all-link {
    display: inline-block;
    padding: var(--spacing-3) var(--spacing-8);
    background-color: var(--color-primary-500);
    color: var(--color-neutral-white);
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-normal), box-shadow var(--transition-normal);
}

.blog-news-section__view-all-link:hover {
    background-color: var(--color-primary-600);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
}

.blog-news-section__view-all-link:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
}

/* Responsive: Center on mobile/tablet */
@media (max-width: 767px) {
    .blog-news-section__view-all-container {
        justify-content: center;
    }
}

/* ==========================================================================
   Partner Section Component
   ========================================================================== */

/* Section Container */
.partner-section {
    background-color: var(--color-neutral-white);
    padding: var(--spacing-12) 0; /* 48px top/bottom mobile */
}

/* Heading */
.partner-section__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-2xl); /* 28px mobile */
    font-weight: var(--font-weight-bold);
    color: var(--color-neutral-900);
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-6); /* 24px */
    text-align: center;
}

/* Intro Text Wrapper */
.partner-section__intro-wrapper {
    margin-bottom: var(--spacing-8); /* 32px */
}

/* Intro Text Paragraphs */
.partner-section__intro-text {
    font-family: var(--font-body);
    font-size: var(--font-size-base); /* 16px */
    color: var(--color-neutral-700);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4); /* 16px */
}

.partner-section__intro-text:last-child {
    margin-bottom: 0;
}

/* Links Wrapper (Unordered List) */
.partner-section__links-wrapper {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-4); /* 16px between items */
}

/* Link Item (List Item) */
.partner-section__link-item {
    margin: 0;
}

/* Partner Link (Anchor) */
.partner-section__link {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-2); /* 8px between name and location */
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-900);
    text-decoration: none;
    padding: var(--spacing-3) 0; /* 12px vertical padding for touch target */
    transition: color var(--transition-normal);
    cursor: pointer;
}

/* Link Name */
.partner-section__link-name {
    font-weight: var(--font-weight-semibold);
}

/* Link Location */
.partner-section__link-location {
    font-weight: normal;
    color: var(--color-neutral-700);
}

/* Link Hover State */
.partner-section__link:hover {
    color: var(--color-primary-500); /* Wine red */
    text-decoration: underline;
}

.partner-section__link:hover .partner-section__link-location {
    color: var(--color-primary-500); /* Wine red */
}

/* Link Focus State (Keyboard Navigation) */
.partner-section__link:focus {
    outline: 2px solid var(--color-primary-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Link Active State */
.partner-section__link:active {
    color: var(--color-primary-700); /* Darker wine red */
}

.partner-section__link:active .partner-section__link-location {
    color: var(--color-primary-700);
}

/* ============================================================================
   RESPONSIVE DESIGN - TABLET
   ============================================================================ */

@media (min-width: 768px) {
    /* Section Container */
    .partner-section {
        padding: var(--spacing-14) 0; /* 56px top/bottom tablet */
    }

    /* Heading */
    .partner-section__heading {
        font-size: var(--font-size-heading-h2-desktop); /* 32px tablet */
        margin-bottom: var(--spacing-8); /* 32px */
    }

    /* Intro Text Wrapper */
    .partner-section__intro-wrapper {
        margin-bottom: var(--spacing-10); /* 40px */
    }

    /* Intro Text Paragraphs */
    .partner-section__intro-text {
        font-size: var(--font-size-lg); /* 18px tablet */
        margin-bottom: var(--spacing-5); /* 20px */
    }

    /* Links Wrapper */
    .partner-section__links-wrapper {
        gap: var(--spacing-5); /* 20px between items */
    }

    /* Partner Link */
    .partner-section__link {
        font-size: var(--font-size-lg); /* 18px tablet */
        padding: var(--spacing-4) 0; /* 16px vertical padding */
    }
}

/* ============================================================================
   RESPONSIVE DESIGN - DESKTOP
   ============================================================================ */

@media (min-width: 1024px) {
    /* Section Container */
    .partner-section {
        padding: var(--spacing-16) 0; /* 64px top/bottom desktop */
    }

    /* Heading */
    .partner-section__heading {
        font-size: var(--font-size-4xl); /* 36px desktop */
        margin-bottom: var(--spacing-10); /* 40px */
    }

    /* Intro Text Wrapper */
    .partner-section__intro-wrapper {
        margin-bottom: var(--spacing-12); /* 48px */
        max-width: 800px; /* Constrain text width for readability */
        margin-left: auto;
        margin-right: auto;
    }

    /* Links Wrapper */
    .partner-section__links-wrapper {
        gap: var(--spacing-6); /* 24px between items */
        max-width: 600px; /* Constrain link width */
        margin-left: auto;
        margin-right: auto;
    }
}