/* =========================================
   NETCLUSIVE.DE - COMPONENTS & LAYOUT
   Layout, Header, Footer, Navigation, Components, Responsive
   Version: 3.1.75
   Date: 2025-12-08
   ========================================= */

/* ============================================================================
   1. LAYOUT - CONTAINER & GRID
   ============================================================================ */

/**
 * Main Layout Wrapper
 * Container for the main content area (sidebar + content)
 */
.main-layout-wrapper {
	padding: 0 !important;
	vertical-align: top !important;
}

/**
 * Site Main - Grid Container
 * Contains sidebar and main content area
 * NOTE: Sidebar hidden on desktop (>768px) since Mega-Menu is used
 */
.site-main {
	display: grid !important;
	grid-template-columns: 1fr;
	width: 100% !important;
	max-width: 1200px !important;
	min-height: 500px;
	margin: 0 auto !important;
	padding-top: 4.5rem !important;
	background-color: var(--color-white);
}

/**
 * Content Area - Main Content
 */
main.content-area {
	width: 100% !important;
	min-width: 0 !important;
	height: 100% !important;
	vertical-align: top !important;
	padding: 0 !important;
	background-color: var(--color-white);
}

/**
 * Content Cell - Inner Content Wrapper
 */
.content-cell {
	vertical-align: top !important;
	padding: var(--spacing-lg) !important;
	margin: 0 !important;
}

/**
 * Main container wrapper
 * Replaces: <div style="width: 1001px; min-height: 100%; height:100%;">
 */
.layout-container {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 100%;
	height: 100%;
	margin: 0;
}

/**
 * Page Layout - Modern CSS Grid
 * Replaces table-based layout with responsive CSS Grid
 */
.page-layout {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	background-color: var(--color-white);
}

.page-header {
	width: 100%;
	position: relative;
	flex-shrink: 0;
}

.page-main {
	width: 100%;
	min-height: 500px;
	position: relative;
	flex-grow: 1;
}

/**
 * Main layout table (legacy support)
 */
.layout-grid {
	border: 0;
	border-spacing: 0;
	border-collapse: collapse;
	height: 100%;
	width: 100% !important;
	min-width: auto !important;
	max-width: 100% !important;
}

/**
 * Content area
 */
.content-area {
	height: 100%;
	vertical-align: top;
	padding: 0;
}

/**
 * Content table wrapper
 */
.content-table {
	border: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: var(--spacing-lg);
}

/**
 * Content row
 */
.content-row {
	margin: 0;
	vertical-align: top;
}

/**
 * Login status bar (fixed top bar)
 */
.login-status-bar {
	width: var(--layout-max-width) !important;
	max-width: 100% !important;
	height: var(--login-bar-height);
	line-height: 18px;
	background-color: var(--color-primary);
	position: fixed;
	top: 0;
	left: 0 !important;
	transform: none !important;
	z-index: var(--z-login-bar);
}

/**
 * Login bar left section (logout link)
 */
.login-bar-left {
	float: left;
	width: var(--sidebar-width);
	padding-left: var(--spacing-xs);
	line-height: var(--login-bar-height);
}

/**
 * Logout link styling
 */
.login-bar-link {
	color: var(--color-white) !important;
	text-decoration: none !important;
	font-weight: normal !important;
}

.login-bar-link:hover {
	color: var(--color-bg-light) !important;
}

/**
 * Login bar right section (customer info)
 * Responsive: adapts to available space
 */
.login-bar-right {
	float: left;
	flex: 1;
	min-width: 0;
	max-width: calc(100% - var(--sidebar-width));
	padding-right: 25px;
	line-height: var(--login-bar-height);
	color: var(--color-white);
}

/**
 * Spacer after login bar
 */
.login-bar-spacer {
	clear: both;
	padding-top: var(--login-bar-height);
}

/**
 * Cart/Shopping sidebar (right side)
 * Responsive: positioned relative to container, hidden on mobile via media query
 */
.cart-sidebar {
	float: left;
	position: absolute;
	top: 0;
	right: 0;
	left: auto;
	width: var(--cart-sidebar-width);
	border-left: 1px solid var(--color-border);
	border-right: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	z-index: var(--z-cart-sidebar);
}

/**
 * Cart phone section
 */
.cart-phone {
	background-color: var(--color-bg-light);
	padding: var(--spacing-sm);
	height: 88px;
	border-bottom: 1px solid var(--color-border);
	text-align: center;
}

/**
 * Cart phone number styling
 */
.cart-phone-number {
	margin-top: 5px;
}

/**
 * Phone link styling
 */
.cart-phone-link {
	font-size: 1.8em;
	font-weight: bold;
	text-decoration: none;
}

/**
 * Cart content area
 */
.cart-content {
	background-color: var(--color-white);
	padding: var(--spacing-sm);
}

/**
 * Cart header
 */
.cart-header {
	text-align: center;
}

/**
 * Domain check sidebar
 * Responsive: positioned relative to container, hidden on mobile via media query
 */
.domain-sidebar {
	float: left;
	position: absolute;
	top: var(--header-height);
	right: 0;
	left: auto;
	width: var(--cart-sidebar-width);
	border: 1px solid var(--color-border);
	background-color: var(--color-white);
}

/**
 * Domain sidebar content
 */
.domain-sidebar-content {
	background-color: var(--color-white);
	padding: var(--spacing-sm);
}

/**
 * Domain input field
 */
.domain-input {
	width: 225px;
	max-width: 100%;
}

/**
 * Domain submit wrapper
 */
.domain-submit {
	text-align: left;
	margin-top: var(--spacing-xs);
}

/**
 * Domain search form row - inline layout for domain input, TLD select, and button
 */
.domain-search-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.domain-search-row .domain-prefix {
    font-weight: 500;
    color: var(--color-secondary-dark);
    white-space: nowrap;
}

.domain-search-row .domain-input {
    flex: 1;
    min-width: 180px;
    max-width: 350px;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-bs-gray-300);
    border-radius: 6px;
    font-size: 1rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.domain-search-row .domain-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

.domain-search-row .tld-select {
    min-width: 120px;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--color-bs-gray-300);
    border-radius: 6px;
    font-size: 1rem;
    background: var(--color-white);
    cursor: pointer;
    transition: border-color 150ms ease;
}

.domain-search-row .tld-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

@media (max-width: 600px) {
    .domain-search-row {
        flex-direction: column;
        align-items: stretch;
    }

    .domain-search-row .domain-prefix {
        display: none;
    }

    .domain-search-row .domain-input {
        max-width: 100%;
    }

    .domain-search-row .tld-select {
        width: 100%;
    }

    .domain-search-row .btn {
        width: 100%;
        justify-content: center;
    }
}

/**
 * Debug section (IP-restricted)
 */
.debug-text {
	color: #efefef;
}

/* ============================================================================
   2. HEADER
   ============================================================================ */

/**
 * Override table-based header with modern Flexbox layout
 * Targets: #header table and nested structure
 */

/* Force header table to behave as flex container */
#header {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	max-width: 1200px !important;
	height: 100px !important;
	min-height: 100px !important;
	max-height: 100px !important;
	padding: 0 !important;
	margin: 0 auto !important;
	background-color: transparent !important;
	border: 0 !important;
	border-spacing: 0 !important;
	position: relative !important;
	transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override tbody and tr to be flex containers */
#header tbody,
#header tr {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	width: 100% !important;
}

/* Header container - preserve original background var(--color-gray-100) */
.header-container {
	background-color: var(--color-gray-100) !important;
	height: 100px !important;
	min-height: 100px !important;
	vertical-align: top !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 !important;
	transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Add shadow class for JavaScript-based scroll detection */
.header-container.scrolled {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/**
 * Header left section - contains hamburger menu and logo
 * On mobile: hamburger left, logo centered or right-aligned
 */
.header-left {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	height: 100px !important;
	width: 100% !important;
	flex-shrink: 0 !important;
}

/**
 * Logo section - left aligned, flexible
 */
.header-logo,
#header .header-logo,
#header td.header-logo {
	display: flex !important;
	align-items: center !important;
	width: 270px !important;
	min-width: 270px !important;
	max-width: 270px !important;
	height: 100px !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
}

/* Logo link styling - preserve original styles from style.css */
.header-logo a.HeaderLogo,
#header .header-logo a.HeaderLogo {
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.header-logo a.HeaderLogo:hover {
	transform: none;
}

/* Header logo - SVG background */
.header-logo a {
	display: block;
	text-indent: -9999px;
	width: 270px;
	height: 100px;
	background-size: 270px 100px;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9InRpbnkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgOTM2IDI4OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PGcgaWQ9IkhpbGZzbGluaWVuIiBkaXNwbGF5PSJub25lIj48L2c+PGcgaWQ9IkxvZ28iPjxnIGlkPSJTY2hyaWZ0enVnIiBkaXNwbGF5PSJub25lIj48cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiM0ODRDNTMiIGQ9Ik0yODAuMDYsMTIwLjEyYzUuMy04LjY1LDEzLjU0LTEzLjY4LDIzLjg3LTEzLjY4YzE5LjEyLDAsMjUuODIsMTIuNDIsMjUuODIsMzEuNjlWMTgwaC0xOC40M3YtMzQuNjJjMC0xMy44Mi0wLjctMjQuMDEtMTIuOTgtMjQuMDFjLTYuMTQsMC0xMS43MywzLjc3LTE0LjY2LDkuMzVjLTIuMDksNC4wNS0zLjA3LDkuNjMtMy4wNywxNi43NVYxODBoLTE4LjQzdi00OS41NWMwLTYuOTgtMC4xNC0xNC42Ni0wLjctMjIuMzNoMTcuNzNjMC4yOCwzLjA3LDAuNTYsOC4yNCwwLjU2LDEySDI4MC4wNnoiLz48cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiM0ODRDNTMiIGQ9Ik0zNTguNjUsMTQ5LjI5YzAuMjgsMTEuMDMsOS4yMSwxOC4xNSwyMi4xOSwxOC4xNWM3Ljk2LDAsMTQuOTQtMi4wOSwyMC45NC01Ljg2bDAuMjgsMTUuMzVjLTYuMTQsMi45My0xNC4zOCw0Ljc1LTIzLjQ1LDQuNzVjLTIzLjU5LDAtMzkuMDgtMTMuODItMzkuMDgtMzcuOTdjMC0yMS42NCwxNC4zOC0zNy4yNywzNi4wMS0zNy4yN2MyMC44LDAsMzEuNTUsMTIuNDIsMzEuNTUsMzguMzljMCwxLjEyLTAuMTQsMy40OS0wLjI4LDQuNDdIMzU4LjY1eiBNMzg5LjkyLDEzNi40NWMwLTExLjczLTUuODYtMTYuNzUtMTUuMDgtMTYuNzVjLTguMjQsMC0xNS40OSw1LjU4LTE2LjQ3LDE2Ljc1SDM4OS45MnoiLz48cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiM0ODRDNTMiIGQ9Ik00MTEuMjgsMTIxLjkzdi0xMy44MmgxNC4xVjkzLjA0bDE3LjU5LTZ2MjEuMDhoMTcuMTd2MTMuODJoLTE3LjE3djI4LjA2YzAsMTAuODksMi4wOSwxNS43NywxMS4xNywxNS43N2MyLjIzLDAsNC43NS0wLjQyLDYuODQtMS4xMmwwLjQyLDE0LjM4Yy0zLjQ5LDEuMjYtOC4xLDEuODItMTIuODQsMS44MmMtMTYuNDcsMC0yMy40NS04LjEtMjMuNDUtMjcuMDh2LTMxLjgzSDQxMS4yOHoiLz48cGF0aCBkaXNwbGF5PSJpbmxpbmUiIGZpbGw9IiMwRDY1QUUiIGQ9Ik01MTcuNSwxMjMuNDdjLTMuMzUtMS40LTYuNy0yLjIzLTExLjMxLTIuMjNjLTE0LjEsMC0yMS41LDEwLjE5LTIxLjUsMjIuNzVjMCwxMi45OCw2LjcsMjIuNjEsMjEuOTIsMjIuNjFjNC4zMywwLDguMS0wLjcsMTIuMTQtMi41MWwwLjk4LDE0LjY2Yy00Ljc1LDEuNTQtOS4wNywyLjIzLTE1LjIxLDIuMjNjLTIzLjg3LDAtMzkuMzYtMTQuMjQtMzkuMzYtMzYuNTdjMC0yMy4xNywxNy43My0zNy4xMywzOC44LTM3LjEzYzUuODYsMCwxMC40NywwLjU2LDE0Ljk0LDEuOTVMNTE3LjUsMTIzLjQ3eiIvPjxwYXRoIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzBENjVBRSIgZD0iTTUzMC42Miw3NC40N2gxOC43MVYxODBoLTE4LjcxVjc0LjQ3eiIvPjxwYXRoIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzBENjVBRSIgZD0iTTYxMi40MiwxNjguMTNjLTQuNjEsNy40LTEyLDEzLjU0LTI0LjcxLDEzLjU0Yy0xNS4yMSwwLTI1LjI2LTExLjAzLTI1LjI2LTI3Ljkydi00NS42NWgxOC40MnYzNy4yN2MwLDEyLjU2LDIuNjUsMjAuOTQsMTMuNTQsMjAuOTRjMTAuNzUsMCwxNy4wMy05LjkxLDE3LjAzLTIyLjMzdi0zNS44N2gxOC41NnY1MC41M2MwLDcuNTQsMCwxNS4zNSwwLjcsMjEuMzZoLTE3LjQ1Yy0wLjI4LTIuOTMtMC41Ni03LjEyLTAuNTYtMTEuODdINjEyLjQyeiIvPjxwYXRoIGRpc3BsYXk9ImlubGluZSIgZmlsbD0iIzBENjVBRSIgZD0iTTY0MywxNjMuMTFjNi45OCwzLjM1LDEzLjk2LDQuODgsMjAuMjQsNC44OHMxMS43My0yLjUxLDExLjczLTcuNjhjMC01LjAzLTIuNjUtNi45OC0xNC4xLTExLjAzYy0xMy42OC00Ljc1LTE5LjEyLTEwLjE5LTE5LjEyLTIwLjhjMC0xMy42OCwxMS4zMS0yMi4wNSwyOC40OC0yMi4wNWM3LjU0LDAsMTQuMSwxLjEyLDE5LjU0LDMuMzVsLTEuNTQsMTMuOTZjLTYuMTQtMi43OS0xMS40NS00LjA1LTE3LjE3LTQuMDVjLTYuMjgsMC0xMC44OSwyLjY1LTEwLjg5LDcuNTRjMCw0Ljg5LDIuOTMsNi41NiwxMy4xMiw5LjkxYzEyLjcsNC4xOSwyMC4zOCw5LjM1LDIwLjM4LDIxLjY0YzAsMTQuOC0xMiwyMi44OS0yOS40NSwyMi44OWMtNy44MiwwLTE1LjA4LTEuMTItMjIuMi0zLjc3TDY0MywxNjMuMTF6Ii8+PHBhdGggZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMEQ2NUFFIiBkPSJNNzA0Ljk3LDk0LjQzVjc2LjU3aDE4LjcxdjE3Ljg3SDcwNC45N3ogTTcwNC45NywxMDguMTFoMTguNzFWMTgwaC0xOC43MVYxMDguMTF6Ii8+PHBhdGggZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMEQ2NUFFIiBkPSJNNzYzLjQ2LDE0OC4wM2MxLjQsNC40NywzLjc3LDEyLjU2LDQuODksMTcuNDVoMC4yOGMxLjI2LTQuODgsMy42My0xMy4yNiw1LjAzLTE3LjQ1bDEyLjctMzkuOTJoMTguODRMNzc5LjA5LDE4MGgtMjIuMDVsLTI2LjM4LTcxLjg5aDIwLjI0TDc2My40NiwxNDguMDN6Ii8+PHBhdGggZGlzcGxheT0iaW5saW5lIiBmaWxsPSIjMEQ2NUFFIiBkPSJNODI1LjQ0LDE0OS4yOWMwLjI4LDExLjAzLDkuMjEsMTguMTUsMjIuMTksMTguMTVjNy45NiwwLDE0Ljk0LTIuMDksMjAuOTQtNS44NmwwLjI4LDE1LjM1Yy02LjE0LDIuOTMtMTQuMzgsNC43NS0yMy40NSw0Ljc1Yy0yMy41OSwwLTM5LjA4LTEzLjgyLTM5LjA4LTM3Ljk3YzAtMjEuNjQsMTQuMzgtMzcuMjcsMzYuMDEtMzcuMjdjMjAuOCwwLDMxLjU1LDEyLjQyLDMxLjU1LDM4LjM5YzAsMS4xMi0wLjE0LDMuNDktMC4yOCw0LjQ3SDgyNS40NHogTTg1Ni43MSwxMzYuNDVjMC0xMS43My01Ljg2LTE2Ljc1LTE1LjA4LTE2Ljc1Yy04LjI0LDAtMTUuNDksNS41OC0xNi40NywxNi43NUg4NTYuNzF6Ii8+PC9nPjxnIGlkPSJTY2hyaWZ0enVnX3gyOF9QZmFkZV94MjlfIj48cGF0aCBmaWxsPSIjMEM2NkFFIiBkPSJNMjcwLjU3LDEyMC4xMmM1LjMtOC42NSwxMy41NC0xMy42OCwyMy44Ny0xMy42OGMxOS4xMiwwLDI1LjgyLDEyLjQyLDI1LjgyLDMxLjY5VjE4MGgtMTguNDN2LTM0LjYyYzAtMTMuODItMC43LTI0LjAxLTEyLjk4LTI0LjAxYy02LjE0LDAtMTEuNzMsMy43Ny0xNC42Niw5LjM1Yy0yLjA5LDQuMDUtMy4wNyw5LjYzLTMuMDcsMTYuNzVWMTgwSDI1Mi43di00OS41NWMwLTYuOTgtMC4xNC0xNC42Ni0wLjctMjIuMzNoMTcuNzNjMC4yOCwzLjA3LDAuNTYsOC4yNCwwLjU2LDEySDI3MC41N3oiLz48cGF0aCBmaWxsPSIjMEM2NkFFIiBkPSJNMzQ5LjE2LDE0OS4yOWMwLjI4LDExLjAzLDkuMjEsMTguMTUsMjIuMTksMTguMTVjNy45NiwwLDE0Ljk0LTIuMDksMjAuOTQtNS44NmwwLjI4LDE1LjM1Yy02LjE0LDIuOTMtMTQuMzgsNC43NS0yMy40NSw0Ljc1Yy0yMy41OSwwLTM5LjA4LTEzLjgyLTM5LjA4LTM3Ljk3YzAtMjEuNjQsMTQuMzgtMzcuMjcsMzYuMDEtMzcuMjdjMjAuOCwwLDMxLjU1LDEyLjQyLDMxLjU1LDM4LjM5YzAsMS4xMi0wLjE0LDMuNDktMC4yOCw0LjQ3SDM0OS4xNnogTTM4MC40MiwxMzYuNDVjMC0xMS43My01Ljg2LTE2Ljc1LTE1LjA4LTE2Ljc1Yy04LjI0LDAtMTUuNDksNS41OC0xNi40NywxNi43NUgzODAuNDJ6Ii8+PHBhdGggZmlsbD0iIzBDNjZBRSIgZD0iTTQwMS43OCwxMjEuOTN2LTEzLjgyaDE0LjFWOTMuMDRsMTcuNTktNnYyMS4wOGgxNy4xN3YxMy44MmgtMTcuMTd2MjguMDZjMCwxMC44OSwyLjA5LDE1Ljc3LDExLjE3LDE1Ljc3YzIuMjMsMCw0Ljc1LTAuNDIsNi44NC0xLjEybDAuNDIsMTQuMzhjLTMuNDksMS4yNi04LjEsMS44Mi0xMi44NCwxLjgyYy0xNi40NywwLTIzLjQ1LTguMS0yMy40NS0yNy4wOHYtMzEuODNINDAxLjc4eiIvPjxwYXRoIGZpbGw9IiMwRDY1QUUiIGQ9Ik01MDguMDEsMTIzLjQ3Yy0zLjM1LTEuNC02LjctMi4yMy0xMS4zLTIuMjNjLTE0LjEsMC0yMS41LDEwLjE5LTIxLjUsMjIuNzVjMCwxMi45OCw2LjcsMjIuNjEsMjEuOTIsMjIuNjFjNC4zMywwLDguMS0wLjcsMTIuMTQtMi41MWwwLjk4LDE0LjY2Yy00Ljc1LDEuNTQtOS4wNywyLjIzLTE1LjIxLDIuMjNjLTIzLjg3LDAtMzkuMzYtMTQuMjQtMzkuMzYtMzYuNTdjMC0yMy4xNywxNy43My0zNy4xMywzOC44LTM3LjEzYzUuODYsMCwxMC40NywwLjU2LDE0Ljk0LDEuOTVMNTA4LjAxLDEyMy40N3oiLz48cGF0aCBmaWxsPSIjMEQ2NUFFIiBkPSJNNTIxLjEzLDc0LjQ3aDE4LjcxVjE4MGgtMTguNzFWNzQuNDd6Ii8+PHBhdGggZmlsbD0iIzBENjVBRSIgZD0iTTYwMi45MywxNjguMTNjLTQuNjEsNy40LTEyLDEzLjU0LTI0LjcxLDEzLjU0Yy0xNS4yMSwwLTI1LjI2LTExLjAzLTI1LjI2LTI3Ljkydi00NS42NWgxOC40MnYzNy4yN2MwLDEyLjU2LDIuNjUsMjAuOTQsMTMuNTQsMjAuOTRjMTAuNzUsMCwxNy4wMy05LjkxLDE3LjAzLTIyLjMzdi0zNS44N2gxOC41NnY1MC41M2MwLDcuNTQsMCwxNS4zNSwwLjcsMjEuMzZoLTE3LjQ1Yy0wLjI4LTIuOTMtMC41Ni03LjEyLTAuNTYtMTEuODdINjAyLjkzeiIvPjxwYXRoIGZpbGw9IiMwRDY1QUUiIGQ9Ik02MzMuNSwxNjMuMTFjNi45OCwzLjM1LDEzLjk2LDQuODgsMjAuMjQsNC44OGM2LjI4LDAsMTEuNzItMi41MSwxMS43Mi03LjY4YzAtNS4wMy0yLjY1LTYuOTgtMTQuMS0xMS4wM2MtMTMuNjgtNC43NS0xOS4xMi0xMC4xOS0xOS4xMi0yMC44YzAtMTMuNjgsMTEuMzEtMjIuMDUsMjguNDctMjIuMDVjNy41NCwwLDE0LjEsMS4xMiwxOS41NCwzLjM1bC0xLjU0LDEzLjk2Yy02LjE0LTIuNzktMTEuNDUtNC4wNS0xNy4xNy00LjA1Yy02LjI4LDAtMTAuODksMi42NS0xMC44OSw3LjU0YzAsNC44OSwyLjkzLDYuNTYsMTMuMTIsOS45MWMxMi43LDQuMTksMjAuMzgsOS4zNSwyMC4zOCwyMS42NGMwLDE0LjgtMTIsMjIuODktMjkuNDUsMjIuODljLTcuODIsMC0xNS4wOC0xLjEyLTIyLjItMy43N0w2MzMuNSwxNjMuMTF6Ii8+PHBhdGggZmlsbD0iIzBENjVBRSIgZD0iTTY5NS40OCw5NC40M1Y3Ni41N2gxOC43djE3Ljg3SDY5NS40OHogTTY5NS40OCwxMDguMTFoMTguN1YxODBoLTE4LjdWMTA4LjExeiIvPjxwYXRoIGZpbGw9IiMwRDY1QUUiIGQ9Ik03NTMuOTcsMTQ4LjAzYzEuNCw0LjQ3LDMuNzcsMTIuNTYsNC44OCwxNy40NWgwLjI4YzEuMjYtNC44OCwzLjYzLTEzLjI2LDUuMDMtMTcuNDVsMTIuNy0zOS45MmgxOC44NEw3NjkuNiwxODBoLTIyLjA1bC0yNi4zOC03MS44OWgyMC4yNEw3NTMuOTcsMTQ4LjAzeiIvPjxwYXRoIGZpbGw9IiMwRDY1QUUiIGQ9Ik04MTUuOTUsMTQ5LjI5YzAuMjgsMTEuMDMsOS4yMSwxOC4xNSwyMi4yLDE4LjE1YzcuOTYsMCwxNC45NC0yLjA5LDIwLjk0LTUuODZsMC4yOCwxNS4zNWMtNi4xNCwyLjkzLTE0LjM4LDQuNzUtMjMuNDUsNC43NWMtMjMuNTksMC0zOS4wOC0xMy44Mi0zOS4wOC0zNy45N2MwLTIxLjY0LDE0LjM4LTM3LjI3LDM2LjAxLTM3LjI3YzIwLjgsMCwzMS41NSwxMi40MiwzMS41NSwzOC4zOWMwLDEuMTItMC4xNCwzLjQ5LTAuMjgsNC40N0g4MTUuOTV6IE04NDcuMjIsMTM2LjQ1YzAtMTEuNzMtNS44Ni0xNi43NS0xNS4wNy0xNi43NWMtOC4yNCwwLTE1LjQ5LDUuNTgtMTYuNDcsMTYuNzVIODQ3LjIyeiIvPjwvZz48ZyBpZD0iQmlsZG1hcmtlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMi4wNzA3NjgsMTUuMDUzMTYyKSI+PHBhdGggaWQ9IlZvbGx0b24iIGZpbGw9IiMwRDY1QUUiIGQ9Ik02NS4xLDU3LjE3aDExMy40NWM4LjM4LDAsMTUuMTYsNi43OSwxNS4xNiwxNS4xN3YxMTMuNDRjMCw4LjM4LTYuNzksMTUuMTctMTUuMTYsMTUuMTdINjUuMWMtOC4zNywwLTE1LjE3LTYuNzktMTUuMTctMTUuMTdWNzIuMzRDNDkuOTMsNjMuOTYsNTYuNzIsNTcuMTcsNjUuMSw1Ny4xN3oiLz48cGF0aCBpZD0ibmMiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xMDQuNjcsOTNjLTIwLjg0LDAtMzIuNDYsMTMuODgtMzIuNDYsMzIuNjl2MzguOTVoMTguMzF2LTM1LjU4YzAtOC4yNSwyLjExLTE4LjQzLDEzLjkxLTE4LjQzYzksMCwxMy4zLDQuODQsMTQuMjYsMTQuMDNjMCwwLjA0LDAsMC4wNywwLDAuMTJjLTAuMTEsMS4zNS0wLjEyLDIuNzQtMC4xMiw0LjE3YzAuMTIsMTEuMzEsMy4zNCwyMC4xNyw5Ljc0LDI2LjU1YzYuNCw2LjM3LDE1LjMsOS41MSwyNi41NCw5LjYyYzIuNjEsMC4wNCw1LjA5LTAuMDgsNy41NC0wLjQ2YzIuNDQtMC4zOSw1LjUxLTEuMTUsOS4wNC0yLjJsLTEuMDQtMTUuM2MtMi41LDEuMTItNC42MiwxLjgtNi40OSwyLjJjLTEuODcsMC40MS0zLjg5LDAuNi02LjAzLDAuNThjLTYuMTUtMC4wOS0xMS4wOS0xLjk3LTE0LjcyLTUuNjhjLTMuNjMtMy43MS01Ljk0LTguNzctNi4wMy0xNS4wN3YtMy40OEMxMzcuMTIsMTA3LjA0LDEyNS41LDkzLDEwNC42Nyw5M0wxMDQuNjcsOTN6IE0xNTQuNjIsOTMuMzVjLTUuMjYtMC4xNC0xMC4zMSwwLjg2LTE0Ljk1LDIuNjdjLTIuMjYsMC44OC00LjQyLDIuMDEtNi4zOCwzLjI1YzQuMSw0LjQ3LDYuOTcsMTAuMTIsOC4zNSwxNi40NmMwLjQ2LTAuNjIsMC44NS0xLjI4LDEuMzktMS44NmMzLjU4LTMuNzcsOC40MS01Ljc3LDE0LjQ5LTUuNzljNC4zNiwwLDguNjYsMS4zOSwxMi44NywyLjQzbDEuMDQtMTQuMzdDMTY1LjkyLDk0LjUyLDE2MC4zMiw5My41MSwxNTQuNjIsOTMuMzV6Ii8+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjxnPjwvZz48Zz48L2c+PGc+PC9nPjwvZz48L3N2Zz4=);
	background-repeat: no-repeat;
	background-position-x: 6px;
	transition: transform 200ms;
}

/**
 * Navigation section - right aligned, flexible
 */
.header-nav,
#header .header-nav,
#header td.header-nav {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-end !important;
	justify-content: flex-start !important;
	width: 730px !important;
	flex-grow: 0 !important;
	height: 100px !important;
	padding: 0 !important;
	margin-left: auto !important;
	vertical-align: top !important;
}

/**
 * Top links (Business Customers | Business Partner | Contact)
 * Utility navigation - small, subtle, top right
 */
.header-links,
#header .header-links {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	width: 730px !important;
	text-align: right !important;
	margin-bottom: 8px !important;
	padding-top: 6px !important;
}

.header-links-inner,
#header .header-links-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-right: 24px !important;
}

/* Top navigation links - utility style */
.header-links a,
.header-links-inner a {
	font-size: 12px !important;
	color: var(--color-secondary) !important;
	text-decoration: none !important;
	opacity: 0.75 !important;
	transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            color 200ms cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
	font-weight: normal !important;
}

.header-links a:hover,
.header-links-inner a:hover {
	color: var(--color-primary) !important;
	opacity: 1 !important;
}

/**
 * Button container (LOGIN / NC-AGENT)
 */
.header-button-wrapper,
.header-button-wrapper-alt,
#header .header-button-wrapper,
#header .header-button-wrapper-alt {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 3px;
	width: 730px !important;
	text-align: right !important;
	float: none !important;
	margin: 0 !important;
	margin-top: 18px !important;
	margin-right: 24px !important;
}

/* Modern button styling - Subtle, less prominent design */
.topMenuButton,
a.topMenuButton {
	background: transparent !important;
	background-image: none !important;
	border: 1px solid rgba(11, 101, 174, 0.3) !important;
	border-radius: 6px !important;
	padding: 0.5rem 1rem !important;
	font-size: 0.8125rem !important;
	font-weight: 500 !important;
	color: var(--color-primary) !important;
	text-decoration: none !important;
	text-shadow: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
	appearance: none !important;
	margin: 0 !important;
	letter-spacing: 0.02em !important;
	position: relative !important;
	overflow: hidden !important;
}

.topMenuButton::before,
a.topMenuButton::before {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 0 !important;
	height: 0 !important;
	border-radius: 50% !important;
	background: radial-gradient(circle, rgba(11, 101, 174, 0.12) 0%, rgba(11, 101, 174, 0) 70%) !important;
	transform: translate(-50%, -50%) !important;
	transition: width 600ms ease, height 600ms ease !important;
}

.topMenuButton:hover,
a.topMenuButton:hover {
	background: rgba(11, 101, 174, 0.08) !important;
	background-image: none !important;
	border-color: rgba(11, 101, 174, 0.5) !important;
	color: var(--color-primary-dark) !important;
	box-shadow: 0 2px 8px rgba(11, 101, 174, 0.15) !important;
	text-decoration: none !important;
}

.topMenuButton:hover::before,
a.topMenuButton:hover::before {
	width: 300px !important;
	height: 300px !important;
}

.topMenuButton:active,
a.topMenuButton:active {
	background: rgba(11, 101, 174, 0.12) !important;
	box-shadow: 0 1px 4px rgba(11, 101, 174, 0.1) !important;
}

.topMenuButton:link,
.topMenuButton:visited {
	color: var(--color-primary) !important;
	text-decoration: none !important;
}

/* ============================================================================
   3. NAVIGATION - MEGA-MENU
   ============================================================================ */

/**
 * Main Navigation Bar
 */
#main-navigation {
	width: 100%;
	height: 55px;
	background-color: var(--color-primary);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	position: relative;
	z-index: 100;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Wrapper for positioning mega-menus */
#main-navigation > * {
	position: static;
}

.nav-container {
	max-width: 1200px;
	height: 55px;
	margin: 0 auto;
	padding: 0;
}

.nav-menu {
	display: flex;
	align-items: stretch;
	justify-content: flex-start;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 55px;
	gap: 0;
}

/**
 * Navigation Items
 */
.nav-item {
	position: static;
	display: flex;
	align-items: stretch;
	height: 55px;
	margin: 0;
	padding: 0;
}

.nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 55px;
	max-height: 55px;
	min-height: 55px;
	padding: 0 1.5rem;
	margin: 0;
	color: var(--color-white) !important;
	text-decoration: none;
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.3px;
	white-space: nowrap;
	box-sizing: border-box;
	overflow: hidden;
	vertical-align: top;
	transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            color 200ms cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.nav-link:hover,
.nav-item.active .nav-link {
	background-color: var(--color-primary-dark);
	color: var(--color-white) !important;
}

/* Underline indicator on hover */
.nav-link::after {
	content: '';
	position: absolute;
	bottom: 8px;
	left: 50%;
	width: 0;
	height: 3px;
	background-color: var(--color-white);
	transition: width 300ms cubic-bezier(0.65, 0, 0.35, 1),
	            left 300ms cubic-bezier(0.65, 0, 0.35, 1);
}

.nav-link:hover::after,
.nav-item.active .nav-link::after {
	width: 70%;
	left: 15%;
}

/**
 * Mega Menu Panel
 */
.mega-menu {
	position: absolute;
	top: 55px;
	left: 0;
	right: 0;
	width: 100%;
	background-color: var(--color-white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            visibility 200ms;
	z-index: 99;
	border-top: 3px solid var(--color-primary-dark);
}

.nav-item:hover .mega-menu,
.nav-item.active .mega-menu {
	opacity: 1;
	visibility: visible;
}

.mega-menu-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 2rem 1.5rem;
	display: grid;
	gap: 2rem;
}

/* Grid Layouts per Category */
.mega-menu.hosting .mega-menu-content {
	grid-template-columns: repeat(3, 1fr);
}

.mega-menu.server .mega-menu-content {
	grid-template-columns: repeat(3, 1fr);
}

.mega-menu.email-office .mega-menu-content {
	grid-template-columns: repeat(3, 1fr);
}

.mega-menu.security .mega-menu-content {
	grid-template-columns: repeat(3, 1fr);
}

.mega-menu.solutions .mega-menu-content {
	grid-template-columns: repeat(3, 1fr);
}

.mega-menu.support .mega-menu-content {
	grid-template-columns: repeat(3, 1fr);
}

.mega-menu.about .mega-menu-content {
	grid-template-columns: repeat(3, 1fr);
}

.mega-menu.kundenbereich .mega-menu-content {
	grid-template-columns: repeat(3, 1fr);
}

/**
 * User Info (Kundennummer + Logout) in Navigation
 */
.nav-customer-number {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 1.25rem;
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.3px;
	white-space: nowrap;
}

.nav-login-icon {
	padding: 0 1.25rem !important;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-login-icon svg {
	display: block;
	width: 20px;
	height: 20px;
	opacity: 0.9;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-login-icon:hover {
	background-color: var(--color-primary-dark) !important;
}

.nav-login-icon:hover svg {
	opacity: 1;
	transform: scale(1.1);
}

.nav-logout {
	padding: 0 1.25rem !important;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-logout svg {
	display: block;
	width: 18px;
	height: 18px;
	opacity: 0.9;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-logout:hover {
	background-color: var(--color-primary-dark) !important;
}

.nav-logout:hover svg {
	opacity: 1;
	transform: translateX(2px);
}

/**
 * Shopping Cart Icon in Navigation
 */
.nav-cart-item {
	position: relative;
}

.nav-cart-icon {
	padding: 0 1.25rem !important;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	display: flex;
	align-items: center;
}

.nav-cart-icon svg {
	display: block;
	width: 20px;
	height: 20px;
	opacity: 0.9;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-cart-icon:hover {
	background-color: var(--color-primary-dark) !important;
}

.nav-cart-icon:hover svg {
	opacity: 1;
	transform: scale(1.1);
}

.nav-cart-badge {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	margin-top: -8px;
	background: #e53e3e;
	color: var(--color-white);
	font-size: 0.625rem;
	font-weight: 700;
	line-height: 1;
	padding: 2px 5px;
	border-radius: 10px;
	min-width: 16px;
	text-align: center;
}

/**
 * Cart Dropdown - Mega Menu Style
 */
.cart-dropdown {
	position: absolute;
	top: 50px;
	right: 0;
	width: 400px;
	background-color: var(--color-white);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1),
	            transform 300ms cubic-bezier(0.4, 0, 0.2, 1),
	            visibility 300ms;
	z-index: 99;
	border-top: 3px solid var(--color-primary);
	border-radius: 0 0 8px 8px;
}

.nav-cart-item:hover .cart-dropdown,
.nav-cart-item.active .cart-dropdown {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.cart-dropdown-content {
	padding: 1.5rem;
}

.cart-dropdown-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--color-gray-300);
}

.cart-dropdown-header h3 {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-secondary-dark);
	margin: 0;
}

.cart-item-count {
	font-size: 0.875rem;
	color: var(--color-gray-700);
	font-weight: 500;
}

.cart-dropdown-items {
	max-height: 400px;
	overflow-y: auto;
}

.cart-dropdown-section {
	margin-bottom: 1.25rem;
}

.cart-dropdown-section:last-child {
	margin-bottom: 0;
}

.cart-section-title {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.cart-item {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	background: #fafbfc;
	border-radius: 4px;
	font-size: 0.875rem;
	color: var(--color-secondary-dark);
	margin-bottom: 0.25rem;
	border-left: 3px solid var(--color-primary);
}

.cart-item-name {
	flex: 1;
	min-width: 0;
	word-break: break-word;
}

.cart-item-price {
	flex-shrink: 0;
	font-weight: 600;
	color: var(--color-primary);
	white-space: nowrap;
}

.cart-item:last-child {
	margin-bottom: 0;
}

.cart-dropdown-footer {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-gray-300);
}

.cart-order-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	padding: 0.75rem 1rem;
	background: var(--color-primary);
	border: none;
	border-radius: 6px;
	color: var(--color-white) !important;
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 600;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
	margin-bottom: 1rem;
}

.cart-order-btn:hover {
	background: var(--color-primary-dark);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(11, 101, 174, 0.3);
}

.cart-order-btn svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	stroke: currentColor;
}

.cart-clear-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem;
	background: transparent;
	border: 1px solid var(--color-gray-300);
	border-radius: 6px;
	color: var(--color-gray-700);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 500;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
	justify-content: center;
	white-space: nowrap;
}

.cart-clear-btn:hover {
	background: #fee;
	border-color: #e53e3e;
	color: #e53e3e;
	text-decoration: none;
}

.cart-clear-btn svg {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

/* Cart Help Section (during business hours) */
.cart-help-section {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 1rem;
	background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
	border-radius: 6px;
	margin-bottom: 1rem;
	border: 1px solid var(--color-info-border);
}

.cart-help-icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background: var(--color-primary);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
}

.cart-help-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.cart-help-content {
	flex: 1;
}

.cart-help-title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-secondary-dark);
	margin-bottom: 0.25rem;
}

.cart-help-phone {
	display: block;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary);
	text-decoration: none;
	margin-bottom: 2px;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cart-help-phone:hover {
	color: var(--color-primary-dark);
	text-decoration: none;
}

.cart-help-hours {
	font-size: 0.75rem;
	color: var(--color-gray-700);
}

/**
 * Mega Menu Column
 */
.mega-menu-column {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

/**
 * Section Headers
 */
.mega-menu-column h3 {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--color-secondary);
	text-transform: uppercase;
	letter-spacing: 0.8px;
	margin: 0 0 1rem 0;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--color-gray-300);
	line-height: 1.2;
}

/**
 * Mega Menu Links
 */
.mega-menu-link {
	display: flex;
	flex-direction: column;
	padding: 1rem;
	color: var(--color-secondary-dark);
	text-decoration: none;
	border-radius: 6px;
	transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid transparent;
	position: relative;
	overflow: hidden;
}

.mega-menu-link::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 0;
	height: 100%;
	background: radial-gradient(ellipse at left, rgba(11, 101, 174, 0.08) 0%, rgba(11, 101, 174, 0) 70%);
	transform: translateY(-50%);
	transition: width 600ms ease;
	z-index: 0;
}

.mega-menu-link:hover {
	background-color: #f7f9fb;
	border-color: var(--color-gray-150);
}

.mega-menu-link:hover::before {
	width: 400px;
	height: 400px;
}

/**
 * Link Title
 */
.mega-menu-link-title {
	font-weight: 600;
	color: var(--color-primary);
	font-size: 1.05rem;
	margin-bottom: 0.5rem;
	line-height: 1.3;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
	display: inline-block;
}

/**
 * Highlight Badge - NEU Tag
 * Used in mega menu and sidebar navigation
 */
.highlight-menu-new {
	display: inline-block;
	margin-left: 8px;
	vertical-align: middle;
	position: relative;
	top: -1px;
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: var(--color-white);
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	line-height: 1;
	box-shadow: 0 2px 4px rgba(11, 101, 174, 0.25);
}

.mega-menu-link:hover .mega-menu-link-title {
	color: var(--color-primary-dark);
}

/**
 * Link Description
 */
.mega-menu-link-desc {
	font-size: 0.875rem;
	color: var(--color-gray-700);
	line-height: 1.5;
	transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-link:hover .mega-menu-link-desc {
	color: var(--color-secondary-dark);
}

/**
 * Featured/Highlight Item
 */
.mega-menu-link.featured {
	background-color: #f0f7ff;
	border-left: 4px solid var(--color-primary);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.mega-menu-link.featured:hover {
	background-color: #e6f2ff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mega-menu-link.featured .mega-menu-link-title {
	color: var(--color-primary-dark);
	font-weight: 700;
}

/**
 * Icon Support (optional)
 */
.mega-menu-link-icon {
	width: 24px;
	height: 24px;
	margin-right: 0.75rem;
	flex-shrink: 0;
	color: var(--color-primary);
	transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-link:hover .mega-menu-link-icon {
	transform: scale(1.1);
}

/**
 * Navigation - Alignment Utilities
 */
.nav-item-login,
.nav-item.nav-login-icon,
.nav-item.nav-user-info {
	margin-left: auto;
}

/**
 * Navigation - Icon Sizing
 */
.nav-icon-sm svg {
	width: 14px;
	height: 14px;
}

.nav-icon-md svg {
	width: 16px;
	height: 16px;
}

.nav-icon-lg svg {
	width: 18px;
	height: 18px;
}

/* ============================================================================
   4. SIDEBAR & CUSTOMER AREA
   ============================================================================ */

/**
 * Right-side fixed sidebar buttons (#sidebar)
 */
#sidebar {
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 100;
	width: 180px;
	pointer-events: none;
}

#sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-end;
}

#sidebar li {
	margin: 0;
	width: 100%;
	display: flex;
	justify-content: flex-end;
}

#sidebar a {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0.625rem;
	min-height: 56px;
	width: 56px;
	padding: 0.875rem 1rem;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--color-white);
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	text-decoration: none;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	box-shadow: 0 4px 12px rgba(11, 101, 174, 0.3);
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
	white-space: nowrap;
	position: relative;
	pointer-events: auto;
}

#sidebar a::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
	opacity: 0;
	transition: opacity 250ms ease;
}

#sidebar a:hover {
	width: 180px;
	box-shadow: 0 6px 20px rgba(11, 101, 174, 0.4);
}

#sidebar a:hover::before {
	opacity: 1;
}

#sidebar a svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

#sidebar .sidebar-text {
	opacity: 0;
	transition: opacity 250ms ease;
}

#sidebar a:hover .sidebar-text {
	opacity: 1;
}

/**
 * Customer Area - Left Sidebar Menu (#menu-left)
 */
#menu-left {
	background: var(--color-white);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	padding: 1.5rem 0;
	margin: 0 0 2rem 0;
}

#menu-left ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#menu-left ul li {
	margin: 0;
	padding: 0;
}

#menu-left ul li.category {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 1rem 1.5rem 0.5rem 1.5rem;
	margin-top: 0.5rem;
	border-top: 1px solid #f1f3f5;
}

#menu-left ul li.category:first-child {
	margin-top: 0;
	border-top: none;
}

#menu-left ul li a {
	display: block;
	padding: 0.75rem 1.5rem;
	color: var(--color-text-secondary);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
	transition: all 150ms ease;
	border-left: 3px solid transparent;
}

#menu-left ul li a:hover {
	background: var(--color-bs-gray-100);
	color: var(--color-primary);
	border-left-color: var(--color-primary);
}

#menu-left ul li.selected a,
#menu-left ul li a.active {
	background: linear-gradient(90deg, rgba(11, 101, 174, 0.08) 0%, transparent 100%);
	color: var(--color-primary);
	font-weight: 600;
	border-left-color: var(--color-primary);
}

#menu-left ul li.selected a:hover {
	background: linear-gradient(90deg, rgba(11, 101, 174, 0.12) 0%, transparent 100%);
}

/* ============================================================================
   5. FOOTER
   ============================================================================ */

/**
 * Ensure body and html allow full width elements
 */
html {
	overflow-x: hidden !important;
	width: 100%;
}

body {
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	min-width: 320px !important;
}

/**
 * Footer element - full width container
 */
footer {
	width: 100vw !important;
	max-width: 100vw !important;
	margin: 0 !important;
	margin-top: 4rem !important;
	margin-left: calc(-50vw + 50%) !important;
	margin-right: calc(-50vw + 50%) !important;
	padding: 0 !important;
	display: block !important;
	clear: both !important;
	position: relative !important;
	left: 50% !important;
	right: 50% !important;
	transform: translateX(-50%) !important;
}

/**
 * Directory Navigation - Fully responsive grid
 */
#directorynav {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	min-height: auto !important;
	padding: 3rem 1.5rem !important;
	margin: 0 !important;
	background-color: var(--color-gray-100) !important;
	border: 0 !important;
	border-top: 1px solid var(--color-gray-300) !important;
	border-bottom: 1px solid var(--color-gray-300) !important;
	float: none !important;
	position: static !important;
}

/* Footer grid wrapper - ULs are direct grid items */
.footer-grid-wrapper {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
	gap: 1.5rem 2rem !important;
	width: 100% !important;
	margin: 0 auto !important;
}

/* On very large screens, limit to 4 columns */
@media (min-width: 1200px) {
	.footer-grid-wrapper {
		grid-template-columns: repeat(4, 1fr) !important;
		max-width: 1200px !important;
	}
}

/* Each UL is a grid cell */
.footer-grid-wrapper > ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* List items */
#directorynav ul li {
	background: none !important;
	padding: 0 !important;
	margin: 0 0 0.5rem 0 !important;
	list-style: none !important;
	display: block !important;
	line-height: 1.5;
}

/* Directory headers */
#directorynav ul li.directorynavHeader {
	color: var(--color-secondary) !important;
	font-size: 16px !important;
	font-weight: bold !important;
	margin-bottom: 0.75rem !important;
	padding-bottom: 0 !important;
	border-bottom: none !important;
}

/* Directory links */
#directorynav a,
#directorynav a:link,
#directorynav a:visited,
#directorynav a:active {
	color: var(--color-secondary) !important;
	font-size: 14px !important;
	text-decoration: none !important;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
	            padding-left 200ms cubic-bezier(0.4, 0, 0.2, 1);
	display: inline-block;
}

#directorynav a:hover {
	color: var(--color-primary) !important;
	padding-left: 4px;
}

/* Social icons section */
#social {
	margin-top: 1.5rem;
}

#social ul {
	display: flex;
	gap: 1rem;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

#social ul li {
	margin: 0 !important;
}

.social-icon {
	width: 32px;
	height: 32px;
	display: block;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.social-icon:hover {
	transform: scale(1.1);
	opacity: 0.8;
}

/**
 * Bottom footer bar
 */
#footer {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 64px !important;
	line-height: normal !important;
	padding: 0 1.5rem !important;
	margin: 0 !important;
	background-color: var(--color-gray-200) !important;
	background-image: url('../images/rauschen.png') !important;
	border: 1px solid var(--color-gray-300) !important;
	position: static !important;
	clear: both;
	overflow: visible !important;
}

#footer ul {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem 1rem;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

#footer ul:after {
	display: none !important;
}

#footer ul li {
	display: inline-flex !important;
	background: none !important;
	height: auto !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
}

#footer ul li a {
	font-size: 14px;
	font-weight: bold !important;
	color: var(--color-secondary) !important;
	text-decoration: none !important;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

#footer ul li a:hover {
	color: var(--color-primary) !important;
}

/* Copyright text */
#footer ul li.footer-copyright,
#footer ul li:first-child {
	color: var(--color-secondary) !important;
}

/* Footer images */
#footer ul li img {
	vertical-align: middle;
	margin-left: 0;
}

/* Footer sections - new structure */
.footer-copyright-section {
	display: inline-flex;
	align-items: center;
	margin-right: 1.5rem;
}

.footer-copyright {
	font-size: 14px;
	font-weight: bold;
	color: var(--color-secondary) !important;
}

.footer-links-section {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-right: 1.5rem;
}

.footer-links-section a {
	font-size: 14px;
	font-weight: bold !important;
	color: var(--color-secondary) !important;
	text-decoration: none !important;
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
	white-space: nowrap;
}

.footer-links-section a:hover {
	color: var(--color-primary) !important;
}

.footer-social-section {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
}

.footer-social-section a {
	display: inline-flex;
	align-items: center;
	transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-social-section a:hover {
	opacity: 0.8;
}

.footer-social-section img.social-icon {
	vertical-align: middle;
	margin-left: 0;
}

/* Footer sidebar cell */
.footer-sidebar {
	height: 0;
	width: var(--sidebar-width);
	background-color: var(--color-bg-lighter);
	padding: 0;
}

/* Footer content cell */
.footer-content {
	height: 0;
	width: 856px;
	max-width: 100%;
	vertical-align: bottom;
	text-align: right;
	padding: 0;
}

/**
 * eKomi Trust Seal - 8th column in footer menu
 */
.footer-ekomi-column {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	min-width: 80px;
}

.footer-ekomi {
	margin: 0;
	padding: 0;
}

.ekomi-seal {
	position: relative !important;
	bottom: auto !important;
	right: auto !important;
	z-index: 1 !important;
	height: auto !important;
	width: auto !important;
	max-width: 80px !important;
	background: transparent !important;
	transition: opacity 0.3s ease;
	opacity: 0.9;
}

.ekomi-seal:hover {
	opacity: 1;
}

.ekomi-seal * {
	background: transparent !important;
}

/* ============================================================================
   6. COMPONENTS - BOXES & CARDS
   ============================================================================ */

/* Generic box with rounded corners */
.box {
	background: linear-gradient(to bottom, var(--color-gray-50) 0%, var(--color-gray-50) 3%, var(--color-gray-100) 35px);
	padding: 1.5rem;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	margin-bottom: 1.5rem;
}

/* Product box (legacy .teaserBox) */
.product-box {
	background-color: var(--color-white);
	border: 1px solid var(--color-gray-300);
	border-radius: 6px;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
	transition: box-shadow 200ms,
	            transform 200ms;
}

.product-box:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.product-box h2 {
	font-size: 1.5rem;
	color: var(--color-secondary);
	margin-bottom: 1rem;
}

/* Hero box with gradient (legacy .StoererBox) */
.hero-box {
	padding: 1.5rem;
	text-align: center;
	font-size: 1.875rem;
	font-weight: 700;
	color: var(--color-white);
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
	margin-bottom: 1.5rem;
}

/* Testimonial box */
.testimonial {
	background-color: var(--color-gray-100);
	padding: 1.5rem;
	color: var(--color-secondary);
	font-size: 1.125rem;
	line-height: 1.6;
	border-radius: 6px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
	margin-bottom: 1.5rem;
}

/* ============================================================================
   7. COMPONENTS - BADGES & HIGHLIGHTS
   ============================================================================ */

/* Badge (inline highlight) */
.badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	font-size: 0.833rem;
	font-weight: 700;
	line-height: 1;
	color: var(--color-white);
	background-color: #dc3545;
	border-radius: 4px;
	vertical-align: middle;
	white-space: nowrap;
}

/* ============================================================================
   8. COMPONENTS - TOOLTIPS
   ============================================================================ */

.info,
[data-tooltip] {
	position: relative;
	cursor: help;
}

.info::after,
[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: 100%;
	left: 16px;
	transform: translateY(-8px);
	padding: 0.5rem 0.75rem;
	background: rgba(73, 76, 83, 0.95);
	color: var(--color-white);
	font-size: 0.875rem;
	line-height: 1.4;
	white-space: nowrap;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms, transform 200ms;
	z-index: 1000;
}

.info::before,
[data-tooltip]::before {
	content: '';
	position: absolute;
	bottom: 100%;
	left: 24px;
	transform: translateY(-2px);
	border: 4px solid transparent;
	border-top-color: rgba(73, 76, 83, 0.95);
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms;
	z-index: 1001;
}

.info:hover::after,
.info:focus::after,
[data-tooltip]:hover::after,
[data-tooltip]:focus::after {
	opacity: 1;
	transform: translateY(-4px);
}

.info:hover::before,
.info:focus::before,
[data-tooltip]:hover::before,
[data-tooltip]:focus::before {
	opacity: 1;
}

/* Tooltip positioned to the left (for elements near right edge) */
[data-tooltip].tooltip-left::after {
	left: auto;
	right: 0;
	white-space: normal;
	max-width: 280px;
}

[data-tooltip].tooltip-left::before {
	left: auto;
	right: 8px;
}

/* ============================================================================
   9. COMPONENTS - GO-TOP BUTTON
   ============================================================================ */

#go-top {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 1px solid rgba(73, 76, 83, 0.2) !important;
	border-radius: 50% !important;
	color: transparent !important;
	font-size: 0 !important;
	opacity: 0.6 !important;
	transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1) !important;
	cursor: pointer !important;
	position: relative !important;
	left: 0 !important;
	margin: 0 !important;
	overflow: hidden !important;
}

/* Hover ripple effect */
#go-top::after {
	content: '' !important;
	position: absolute !important;
	top: 50% !important;
	left: 50% !important;
	width: 0 !important;
	height: 0 !important;
	border-radius: 50% !important;
	background: radial-gradient(circle, rgba(11, 101, 174, 0.2) 0%, rgba(11, 101, 174, 0) 70%) !important;
	transform: translate(-50%, -50%) !important;
	transition: width 600ms ease, height 600ms ease !important;
	z-index: 0 !important;
}

/* Arrow icon using pseudo-element */
#go-top::before {
	content: '' !important;
	display: block !important;
	width: 10px !important;
	height: 10px !important;
	border-top: 2px solid var(--color-secondary) !important;
	border-right: 2px solid var(--color-secondary) !important;
	transform: rotate(-45deg) !important;
	transition: border-color 250ms ease !important;
	position: relative !important;
	top: 2px !important;
	z-index: 1 !important;
}

#go-top:hover {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	opacity: 1 !important;
	box-shadow: 0 4px 12px rgba(11, 101, 174, 0.25) !important;
}

#go-top:hover::after {
	width: 200% !important;
	height: 200% !important;
}

#go-top:hover::before {
	border-color: var(--color-white) !important;
}

#go-top:active {
	/* Active state - no vertical movement */
}

/* ============================================================================
   10. COMPONENTS - MISC
   ============================================================================ */

/* Mobile menu elements - Hide on desktop */
.mobile-menu-toggle,
.mobile-menu-drawer,
.mobile-menu-overlay {
	display: none !important;
}

@media (min-width: 1025px) {
	.mobile-menu-toggle,
	.mobile-menu-drawer,
	.mobile-menu-overlay {
		display: none !important;
		visibility: hidden !important;
	}
}

/* ============================================================================
   11. RESPONSIVE - MEDIA QUERIES
   ============================================================================ */

/**
 * DESKTOP LARGE (min-width: 1200px)
 */
@media (min-width: 1200px) {
	/* Enhanced spacing for large screens - handled by variables */
}

/**
 * DESKTOP RESPONSIVE (max-width: 1280px)
 */
@media (max-width: 1280px) {
	.layout-container {
		width: 100% !important;
		padding: 0 !important;
	}

	.page-layout {
		max-width: 100%;
		margin: 0;
	}

	.layout-grid {
		width: 100% !important;
		min-width: auto !important;
	}

	.header-container {
		width: 100%;
	}

	.header-logo {
		width: 200px;
	}

	.header-nav {
		width: calc(100% - 200px);
	}

	.header-links {
		width: 100%;
	}

	/* Hide cart/domain sidebars on smaller screens */
	.cart-sidebar,
	.domain-sidebar {
		display: none;
	}

	.login-status-bar {
		width: 100% !important;
		left: 0 !important;
		transform: none !important;
	}

	/* Footer grid responsive */
	#directorynav {
		padding: 2rem 1rem !important;
	}

	#menu-left {
		padding: 1.25rem 0;
	}

	.nav-icon-sm svg { width: 15px; height: 15px; }
	.nav-icon-md svg { width: 17px; height: 17px; }
	.nav-icon-lg svg { width: 19px; height: 19px; }
}

/**
 * TABLET PORTRAIT & MOBILE (max-width: 1024px)
 */
@media (max-width: 1024px) {
	.layout-container {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	.page-layout {
		max-width: 100%;
		min-height: auto;
		margin: 0;
		padding: 0;
	}

	.page-header,
	.page-main {
		width: 100% !important;
		max-width: 100% !important;
	}

	.layout-grid {
		width: 100% !important;
		min-width: 0 !important;
		max-width: 100% !important;
	}

	/* Force table to be responsive */
	.layout-grid,
	.layout-grid tbody,
	.layout-grid tr,
	.layout-grid td {
		display: block !important;
		width: 100% !important;
	}

	/* Site Main - Single Column on Mobile */
	.site-main {
		grid-template-columns: 1fr !important;
		width: 100% !important;
	}

	/* Hide fixed sidebar buttons on mobile */
	#sidebar {
		display: none !important;
	}

	/* Content area takes full width */
	main.content-area {
		width: 100% !important;
		max-width: 100% !important;
	}

	.content-cell {
		padding: 12px !important;
	}

	/* Header left - mobile layout with hamburger and centered logo */
	.header-left {
		position: relative !important;
		justify-content: center !important;
	}

	/* Mobile Menu Button (Hamburger) - fixed left position */
	.mobile-menu-toggle {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: absolute;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1000;
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		background-color: var(--color-primary);
		border: none;
		border-radius: 4px;
		cursor: pointer;
		padding: 0;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	/* Logo centered in header */
	.header-left .header-logo {
		margin: 0 auto !important;
	}

	.mobile-menu-toggle span {
		display: block;
		width: 24px;
		height: 2px;
		background-color: white;
		position: absolute;
		left: 10px;
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mobile-menu-toggle span:nth-child(1) {
		top: 13px;
	}

	.mobile-menu-toggle span:nth-child(2) {
		top: 21px;
	}

	.mobile-menu-toggle span:nth-child(3) {
		top: 29px;
	}

	/* Animated hamburger to X with 3x rotation */
	.mobile-menu-toggle.active span:nth-child(1) {
		transform: translateY(8px) rotate(1125deg);
		top: 13px;
	}

	.mobile-menu-toggle.active span:nth-child(2) {
		opacity: 0;
		transform: scale(0) rotate(1080deg);
	}

	.mobile-menu-toggle.active span:nth-child(3) {
		transform: translateY(-8px) rotate(-1125deg);
		top: 29px;
	}

	/* Mobile Menu Drawer - starts below header (100px) */
	.mobile-menu-drawer {
		display: block !important;
		position: fixed;
		top: 100px;
		left: -320px;
		width: 320px;
		height: calc(100vh - 100px);
		background-color: var(--color-white);
		z-index: 999;
		overflow-y: auto;
		transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		box-shadow: 2px 0 20px rgba(0, 0, 0, 0.3);
	}

	.mobile-menu-drawer.active {
		left: 0;
	}

	/* Mobile Navigation */
	.mobile-nav {
		padding: 0 0 20px 0;
	}

	/* Mobile Nav Item (Accordion) */
	.mobile-nav-item {
		border-bottom: 1px solid #e0e0e0;
	}

	/* Mobile Nav Toggle Button */
	.mobile-nav-toggle {
		width: 100%;
		padding: 16px 20px;
		background: none;
		border: none;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 16px;
		font-weight: 600;
		color: var(--color-secondary);
		cursor: pointer;
		transition: background-color 0.2s;
		text-align: left;
	}

	.mobile-nav-toggle:hover,
	.mobile-nav-toggle:active {
		background-color: #f7f7f7;
	}

	.mobile-nav-toggle span {
		flex: 1;
	}

	/* Mobile Nav Arrow Icon */
	.mobile-nav-arrow {
		width: 20px;
		height: 20px;
		flex-shrink: 0;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.mobile-nav-toggle[aria-expanded="true"] .mobile-nav-arrow {
		transform: rotate(180deg);
	}

	/* Mobile Nav Content (Dropdown) */
	.mobile-nav-content {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		background-color: #f9f9f9;
	}

	.mobile-nav-toggle[aria-expanded="true"] + .mobile-nav-content {
		max-height: 1000px;
	}

	/* Mobile Nav Section */
	.mobile-nav-section {
		padding: 12px 20px;
	}

	.mobile-nav-section h4 {
		font-size: 13px;
		font-weight: 600;
		color: var(--color-text-light);
		text-transform: uppercase;
		letter-spacing: 0.5px;
		margin: 0 0 8px 0;
		padding: 0;
	}

	/* Mobile Nav Link */
	.mobile-nav-link {
		display: block;
		padding: 12px 20px;
		color: var(--color-secondary-dark);
		text-decoration: none;
		transition: background-color 0.2s, color 0.2s;
	}

	.mobile-nav-link:hover,
	.mobile-nav-link:active {
		background-color: var(--color-primary);
		color: var(--color-white);
	}

	.mobile-nav-link-title {
		display: block;
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 2px;
	}

	.mobile-nav-link-desc {
		display: block;
		font-size: 13px;
		color: var(--color-gray-700);
		line-height: 1.4;
	}

	.mobile-nav-link:hover .mobile-nav-link-desc,
	.mobile-nav-link:active .mobile-nav-link-desc {
		color: rgba(255, 255, 255, 0.9);
	}

	/* Mobile Nav Badge (NEU) */
	.mobile-nav-badge {
		display: inline-block;
		padding: 2px 6px;
		background-color: #f59f00;
		color: var(--color-white);
		font-size: 10px;
		font-weight: 700;
		border-radius: 3px;
		margin-left: 6px;
		vertical-align: middle;
	}

	/* Mobile Nav Login & Footer */
	.mobile-nav-login {
		padding: 1rem;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		margin-top: 0.5rem;
	}

	.mobile-nav-login .btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 0.875rem 1rem;
		font-size: 1rem;
	}

	.mobile-nav-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1rem;
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		margin-top: 0.5rem;
		background: rgba(0, 0, 0, 0.2);
	}

	.mobile-nav-customer {
		color: rgba(255, 255, 255, 0.7);
		font-size: 0.875rem;
		font-weight: 500;
	}

	/* Mobile Menu Overlay */
	.mobile-menu-overlay {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 998;
	}

	.mobile-menu-overlay.active {
		display: block;
	}

	/* Full width content on mobile */
	.content-area {
		width: 100% !important;
	}

	/* Force content tables to be block */
	.content-table,
	.content-table tbody,
	.content-table tr,
	.content-table td {
		display: block !important;
		width: 100% !important;
	}

	.content-table {
		padding: 12px !important;
	}

	/* Stack header vertically */
	.header-container {
		height: auto !important;
		width: 100% !important;
	}

	/* Force header table to be block */
	#header {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		position: relative !important;
		min-height: 0 !important;
		height: auto !important;
		max-height: none !important;
		overflow: visible !important;
		box-sizing: border-box !important;
	}

	.header-container {
		height: auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}

	#header tbody,
	#header tr,
	#header td {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		box-sizing: border-box !important;
	}

	.header-logo,
	#header .header-logo,
	#header td.header-logo {
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		height: auto !important;
		min-height: 80px !important;
		text-align: center !important;
		position: relative !important;
		padding: 1rem 0 !important;
	}

	.header-logo a,
	.header-logo a.HeaderLogo,
	#header .header-logo a,
	#header .header-logo a.HeaderLogo {
		width: 200px !important;
		height: 75px !important;
		background-size: 200px 75px !important;
		background-position: center !important;
		background-position-x: center !important;
		margin: 0 auto !important;
		position: relative !important;
		left: 0 !important;
		transform: none !important;
	}

	.header-nav,
	#header .header-nav,
	#header td.header-nav {
		display: block !important;
		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;
	}

	.header-links,
	#header .header-links,
	#header td.header-links {
		width: 100% !important;
		max-width: 100% !important;
		text-align: center !important;
		margin: 0 auto 12px !important;
		padding: 12px 1rem !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	.header-links-inner {
		margin-right: 0 !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		flex-wrap: wrap !important;
		gap: 8px !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	.header-button-wrapper,
	.header-button-wrapper-alt {
		float: none !important;
		display: inline-flex !important;
		margin: 0 !important;
	}

	/* Adjust login bar for mobile */
	.login-status-bar {
		height: auto;
		min-height: var(--login-bar-height);
		line-height: normal;
		padding: 4px 0;
	}

	.login-bar-left {
		float: none;
		display: block;
		width: 100%;
		text-align: center;
		padding: 4px 0;
		line-height: normal;
	}

	.login-bar-right {
		float: none;
		display: block;
		width: 100%;
		text-align: center;
		padding: 4px 0;
		line-height: normal;
	}

	.login-bar-spacer {
		padding-top: 48px;
	}

	/* Footer adjustments */
	.footer-sidebar {
		display: none;
	}

	.footer-content {
		width: 100%;
	}

	/* Directory Navigation Footer - Mobile responsive */
	#directorynav {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: visible !important;
		padding: 1.5rem 1rem !important;
	}

	#directorynav .footer-grid-wrapper {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1rem 1.5rem !important;
	}

	/* Trust bar - reduce logo size on mobile */
	.trust-bar {
		padding: 1.5rem 1rem !important;
	}

	.trust-items {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 1.5rem !important;
	}

	.trust-logos {
		gap: 1rem !important;
	}

	.trust-logo {
		height: 40px !important;
		max-height: 40px !important;
	}

	/* Hide "TOP" text in scroll-to-top button, show only arrow */
	#go-top {
		font-size: 0 !important;
		line-height: 0 !important;
	}

	/* Bottom footer bar */
	#footer {
		overflow: visible !important;
		width: 100% !important;
		max-width: 100% !important;
		padding: 1.5rem 1rem !important;
		height: auto !important;
		min-height: 64px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 1rem !important;
		align-items: center !important;
		background-color: var(--color-gray-200) !important;
		background-image: url('../images/rauschen.png') !important;
		border: 1px solid var(--color-gray-300) !important;
	}

	/* Copyright section - first line */
	.footer-copyright-section {
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
		text-align: center !important;
	}

	.footer-copyright {
		font-size: 13px !important;
		font-weight: bold !important;
		color: var(--color-secondary) !important;
	}

	/* Links section - second line */
	.footer-links-section {
		display: flex !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 0.5rem 0.75rem !important;
		width: 100% !important;
	}

	.footer-links-section a {
		font-size: 13px !important;
		font-weight: bold !important;
		color: var(--color-secondary) !important;
		text-decoration: none !important;
		white-space: nowrap !important;
		transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
	}

	.footer-links-section a:hover {
		color: var(--color-primary) !important;
	}

	/* Social icons section - third line */
	.footer-social-section {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center !important;
		align-items: center !important;
		gap: 1rem !important;
		width: 100% !important;
	}

	.footer-social-section a {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) !important;
	}

	.footer-social-section a:hover {
		opacity: 0.8 !important;
	}

	.footer-social-section img.social-icon {
		width: 24px !important;
		height: 24px !important;
	}

	/* Hide mega menu navigation on mobile */
	#main-navigation {
		display: none;
	}

	/* Hide sidebar on mobile */
	#sidebar {
		display: none;
	}

	/* Stack footer grid */
	.footer-grid {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	#footer {
		height: auto;
		min-height: 64px;
		padding: 1rem;
	}

	#footer ul {
		flex-direction: column;
		gap: 0.5rem;
	}

	/* eKomi seal in footer menu */
	.ekomi-seal {
		max-width: 80px !important;
	}

	#menu-left {
		padding: 1rem 0;
	}

	.nav-icon-sm svg { width: 16px; height: 16px; }
	.nav-icon-md svg { width: 18px; height: 18px; }
	.nav-icon-lg svg { width: 20px; height: 20px; }
}

/**
 * SMALL MOBILE/TABLET (max-width: 768px)
 * Additional fixes for content visibility
 */
@media (max-width: 768px) {
	/* Prevent horizontal scrolling globally */
	html,
	body {
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}

	/* Ensure all containers allow full width */
	.layout-container,
	.page-layout,
	.site-main,
	.content-area,
	main,
	#content,
	#header,
	#footer,
	.header-container {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		overflow-x: hidden !important;
	}

	/* Ensure tables don't force horizontal scroll */
	table,
	.layout-grid,
	.content-table {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		table-layout: auto !important;
		box-sizing: border-box !important;
		overflow-x: auto !important;
	}

	/* Ensure all cells take full width */
	td,
	th {
		max-width: 100% !important;
		min-width: 0 !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		box-sizing: border-box !important;
	}

	/* Ensure media elements are responsive */
	img,
	video,
	iframe {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Prevent horizontal overflow */
	.page-header,
	.page-main,
	.page-footer {
		overflow-x: hidden !important;
	}

	/* Ensure all divs and containers are constrained */
	div,
	section,
	article,
	aside,
	nav {
		max-width: 100% !important;
		box-sizing: border-box !important;
	}

	/* Footer specific fixes */
	footer,
	#directorynav,
	#footer {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: visible !important;
		box-sizing: border-box !important;
	}

	#footer ul {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch !important;
	}
}

/**
 * MOBILE (max-width: 480px)
 */
@media (max-width: 480px) {
	.layout-container {
		padding: 0 4px;
	}

	.content-table {
		padding: 8px;
	}

	.content-cell {
		padding: 8px;
	}

	.header-logo {
		height: 60px;
	}

	.header-links-inner {
		font-size: 0.9em;
	}

	.topMenuButton,
	a.topMenuButton {
		padding: 0.65rem 1.25rem !important;
		font-size: 0.875rem !important;
		min-height: 44px !important;
	}

	#directorynav {
		padding: 1.5rem 1rem !important;
	}

	#directorynav .footer-grid-wrapper {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
	}

	#directorynav ul li.directorynavHeader {
		font-size: 15px !important;
		margin-bottom: 0.5rem !important;
	}

	#directorynav a,
	#directorynav a:link,
	#directorynav a:visited,
	#directorynav a:active {
		font-size: 13px !important;
	}

	#footer {
		padding: 1rem 0.5rem !important;
	}

	#footer ul {
		flex-direction: column;
		align-items: center;
		gap: 0.5rem;
	}

	#footer ul li {
		text-align: center;
	}

	#footer ul li a {
		font-size: 13px;
	}
}

/**
 * MOBILE LANDSCAPE (max-width: 640px and landscape)
 */
@media (max-width: 640px) and (orientation: landscape) {
	#header {
		padding: 0.5rem 1.5rem !important;
	}

	.header-logo,
	#header .header-logo,
	#header td.header-logo {
		max-width: 140px !important;
		margin-bottom: 0.5rem;
	}

	#directorynav {
		grid-template-columns: repeat(2, 1fr) !important;
		padding: 1rem !important;
	}
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/**
 * Focus states for keyboard navigation
 * Using cyan color (#40c4ff) for better visibility and to distinguish from brand blue
 */
.header-links a:focus,
.header-links-inner a:focus,
.topMenuButton:focus,
a.topMenuButton:focus,
#directorynav a:focus,
#footer a:focus {
	outline: 3px solid #40c4ff !important;
	outline-offset: 2px !important;
	z-index: 1;
}

.topMenuButton:focus,
a.topMenuButton:focus {
	box-shadow: 0 0 0 3px rgba(64, 196, 255, 0.4) !important;
}

/* Navigation links: only show focus on keyboard navigation, not mouse clicks */
.nav-link:focus:not(:focus-visible),
.mega-menu-link:focus:not(:focus-visible),
.nav-cart-icon:focus:not(:focus-visible) {
	outline: none;
}

.nav-link:focus-visible,
.mega-menu-link:focus-visible,
.nav-cart-icon:focus-visible {
	outline: 3px solid #40c4ff;
	outline-offset: 2px;
	z-index: 1;
}

/**
 * High contrast mode support
 */
@media (prefers-contrast: high) {
	.header-links a,
	#directorynav a,
	#footer a {
		text-decoration: underline;
	}

	#directorynav ul li.directorynavHeader {
		border-bottom-width: 3px;
	}

	.nav-link::after {
		height: 4px;
	}

	.mega-menu {
		border-top-width: 4px;
	}

	.mega-menu-link.featured {
		border-left-width: 5px;
	}

	.mega-menu-column h3 {
		border-bottom-width: 3px;
	}
}

/**
 * Reduced motion support
 */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.header-logo a.HeaderLogo:hover,
	.topMenuButton:hover,
	a.topMenuButton:hover,
	.mega-menu-link:hover,
	.mega-menu-link.featured:hover {
		transform: none;
	}

	.mega-menu,
	.nav-link::after,
	.mega-menu-link,
	.mega-menu-link-title,
	.mega-menu-link-desc,
	.mega-menu-link-icon {
		transition: none;
	}
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
	.login-status-bar,
	.cart-sidebar,
	.domain-sidebar,
	.header-button-wrapper,
	.header-button-wrapper-alt,
	#main-navigation,
	#directorynav,
	#sidebar {
		display: none !important;
	}

	.layout-container {
		width: 100%;
	}

	.content-area {
		width: 100% !important;
	}

	#header {
		border-bottom: 1px solid #000;
		box-shadow: none;
		page-break-after: avoid;
	}

	#footer {
		border-top: 1px solid #000;
		page-break-before: avoid;
	}

	#footer ul li a {
		text-decoration: underline;
	}
}

/* ============================================================================
   UTILITY CLASSES
   ============================================================================ */

/**
 * Hide visually but keep for screen readers
 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/**
 * Mobile-only visibility
 */
.mobile-only {
	display: none;
}

@media (max-width: 768px) {
	.mobile-only {
		display: block;
	}

	.desktop-only {
		display: none;
	}
}

/* ============================================================================
   NETCLUSIVE.DE - HOMEPAGE SPECIFIC STYLES
   Hero, Slider, Product Grid, Trust Bar
   ============================================================================ */

/* Hero Banner - Full-width background image container */
.hero-banner {
    position: relative;
    width: 100%;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Hero background image (WebP for better compression, 86KB vs 1.4MB PNG) */
    background: url('/assets/hero-images/cloud-server.webp');
    background-size: cover;
    background-position: calc(50% + 110px) center;
    margin-bottom: 0;
    /* Position hero below the mega-menu dropdown area */
    margin-top: 55px;
}

/* Dark overlay for text readability */
.hero-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

/* Hero text styling when inside banner */
.hero-banner .hero-text {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1100px;
    margin: 0;
    padding: 3rem 2rem;
}

/* Reduce spacing after hero banner */
.page-main.has-hero .site-main {
    padding-top: 1rem !important;
}

.page-main.has-hero .content-cell {
    padding-top: 0 !important;
}

.hero-banner .hero-overline {
    color: rgba(255, 255, 255, 0.9);
}

.hero-banner .hero-text h1 {
    color: var(--color-white);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.hero-banner .hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    .hero-banner {
        min-height: auto;
    }

    .hero-banner .hero-text {
        padding: 1.5rem;
    }
}

/* Hero Domain Widget - integrated in hero banner */
.hero-domain-widget {
    position: relative;
    z-index: 2;
    max-width: 680px;
    margin: 0 auto;
    padding: 0 2rem 2.5rem;
}

.hero-domain-widget .domain-widget-inner {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.hero-domain-widget .domain-widget-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.hero-domain-widget .domain-widget-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: center;
}

.hero-domain-widget .domain-widget-input-group {
    display: flex;
    gap: 0.5rem;
}

.hero-domain-widget .domain-widget-input-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    padding: 0 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hero-domain-widget .domain-widget-input-wrap:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

.hero-domain-widget .domain-widget-prefix {
    color: var(--color-text-muted);
    font-weight: 500;
    user-select: none;
}

.hero-domain-widget .domain-widget-input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.875rem 0.5rem;
    font-size: 1rem;
    color: var(--color-text-primary);
    outline: none;
}

.hero-domain-widget .domain-widget-input::placeholder {
    color: var(--color-text-muted);
}

.hero-domain-widget .domain-widget-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.hero-domain-widget .domain-widget-btn:hover {
    background: var(--color-primary-dark);
}

.hero-domain-widget .domain-widget-btn:active {
    transform: scale(0.98);
}

.hero-domain-widget .domain-widget-btn svg {
    width: 18px;
    height: 18px;
}

.hero-domain-widget .domain-widget-hint {
    min-height: 1.25rem;
    text-align: center;
    font-size: 0.8125rem;
    visibility: hidden;
}

.hero-domain-widget .hint-success {
    color: var(--color-success);
}

.hero-domain-widget .hint-info {
    color: var(--color-text-muted);
}

.hero-domain-widget .hint-error {
    color: var(--color-error);
}

.hero-domain-widget .domain-widget-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: domain-spin 0.8s linear infinite;
}

@media (max-width: 600px) {
    .hero-domain-widget {
        padding: 0 1rem 1.5rem;
    }

    .hero-domain-widget .domain-widget-inner {
        padding: 1rem;
    }

    .hero-domain-widget .domain-widget-input-group {
        flex-direction: column;
    }

    .hero-domain-widget .domain-widget-btn {
        justify-content: center;
        padding: 1rem;
    }
}

/* Hero Section (standalone, without banner) */
.hero-text {
    text-align: center;
    max-width: 900px;
    margin: 2rem auto;
}

.hero-overline {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.75rem;
}

.hero-text h1 {
    color: var(--color-text-primary);
    font-size: 2.5rem;
    font-weight: 700;
    margin: 0 0 1.5rem 0;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0;
}

@media (max-width: 768px) {
    .hero-text {
        margin: 1.5rem auto;
    }

    .hero-text h1 {
        font-size: 1.75rem;
        margin: 0 0 1rem 0;
    }

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

/* Modern Hero Slider - Full Content Width */
.hero-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 2rem 0;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.hero-slider-wrapper {
    position: relative;
    aspect-ratio: 808 / 436;
    overflow: hidden;
}

.slider-track {
    display: flex;
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
}

.slider-slide {
    min-width: 100%;
    height: 100%;
}

.slider-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.95);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: absolute;
}

.slider-nav::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 101, 174, 0.15) 0%, rgba(11, 101, 174, 0) 70%);
    transform: translate(-50%, -50%);
    transition: width 600ms ease, height 600ms ease;
}

.slider-nav:hover {
    background: var(--color-white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.slider-nav:hover::before {
    width: 150px;
    height: 150px;
}

.slider-nav svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.slider-nav-prev {
    left: 1rem;
}

.slider-nav-next {
    right: 1rem;
}

.slider-indicators {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.75rem;
    z-index: 10;
}

.slider-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0;
    position: relative;
    overflow: hidden;
}

.slider-indicator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
    transform: translate(-50%, -50%);
    transition: width 600ms ease, height 600ms ease;
}

.slider-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

.slider-indicator:hover::before {
    width: 50px;
    height: 50px;
}

.slider-indicator.active {
    background: var(--color-white);
    width: 32px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    .hero-slider {
        margin: 1rem 0;
        border-radius: 12px;
    }

    .slider-nav {
        width: 40px;
        height: 40px;
    }

    .slider-nav svg {
        width: 20px;
        height: 20px;
    }

    .slider-nav-prev {
        left: 0.5rem;
    }

    .slider-nav-next {
        right: 0.5rem;
    }
}

/* Product Grid Modern Design */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1.5rem;
    column-gap: 1.5rem;
    margin: 1.5rem 0 0 0;
    padding: 0;
}

.product-card {
    position: relative;
    background: var(--color-white);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 150ms ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    cursor: pointer;
}

.product-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.15);
}

.product-card > a.product-card-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    text-decoration: none;
}

.product-card-full {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border-color: var(--color-info-border);
    position: relative;
    overflow: hidden;
}

.product-card-full::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -50px;
    width: 800px;
    height: 420px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 420'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%230b65ae' stop-opacity='0.18'/%3E%3Cstop offset='50%25' stop-color='%230b65ae' stop-opacity='0.08'/%3E%3Cstop offset='100%25' stop-color='%230b65ae' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%230b65ae' stop-opacity='0.12'/%3E%3Cstop offset='60%25' stop-color='%230b65ae' stop-opacity='0.04'/%3E%3Cstop offset='100%25' stop-color='%230b65ae' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none'%3E%3Cpath stroke='url(%23g2)' stroke-width='1.5' d='M770 50 Q700 80 630 60 Q560 40 490 70 Q420 100 350 70 Q280 40 210 70 Q140 100 70 70'/%3E%3Cpath stroke='url(%23g2)' stroke-width='1.5' d='M780 100 Q710 130 640 110 Q570 90 500 120 Q430 150 360 120 Q290 90 220 120 Q150 150 80 120'/%3E%3Cpath stroke='url(%23g2)' stroke-width='1.5' d='M790 150 Q720 180 650 160 Q580 140 510 170 Q440 200 370 170 Q300 140 230 170 Q160 200 90 170'/%3E%3Cg stroke='url(%23g1)' stroke-width='1.5'%3E%3Cline x1='720' y1='70' x2='660' y2='110'/%3E%3Cline x1='720' y1='70' x2='750' y2='130'/%3E%3Cline x1='720' y1='70' x2='630' y2='55'/%3E%3Cline x1='720' y1='70' x2='770' y2='50'/%3E%3Cline x1='720' y1='70' x2='705' y2='30'/%3E%3Cline x1='660' y1='110' x2='750' y2='130'/%3E%3Cline x1='660' y1='110' x2='580' y2='95'/%3E%3Cline x1='630' y1='55' x2='580' y2='95'/%3E%3Cline x1='580' y1='95' x2='510' y2='130'/%3E%3Cline x1='510' y1='130' x2='440' y2='160'/%3E%3Cline x1='630' y1='55' x2='560' y2='40'/%3E%3Cline x1='440' y1='160' x2='360' y2='190'/%3E%3Cline x1='360' y1='190' x2='280' y2='220'/%3E%3Cline x1='510' y1='130' x2='420' y2='115'/%3E%3Cline x1='420' y1='115' x2='340' y2='145'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2'%3E%3Ccircle cx='720' cy='70' r='12'/%3E%3Ccircle cx='720' cy='70' r='5' fill='url(%23g1)'/%3E%3Ccircle cx='660' cy='110' r='10'/%3E%3Ccircle cx='660' cy='110' r='4' fill='url(%23g1)'/%3E%3Ccircle cx='750' cy='130' r='8'/%3E%3Ccircle cx='750' cy='130' r='3' fill='url(%23g1)'/%3E%3Ccircle cx='630' cy='55' r='9'/%3E%3Ccircle cx='630' cy='55' r='3.5' fill='url(%23g1)'/%3E%3Ccircle cx='580' cy='95' r='8'/%3E%3Ccircle cx='580' cy='95' r='3' fill='url(%23g1)'/%3E%3Ccircle cx='510' cy='130' r='7'/%3E%3Ccircle cx='510' cy='130' r='2.5' fill='url(%23g1)'/%3E%3Ccircle cx='770' cy='50' r='6'/%3E%3Ccircle cx='770' cy='50' r='2' fill='url(%23g1)'/%3E%3Ccircle cx='705' cy='30' r='7'/%3E%3Ccircle cx='705' cy='30' r='2.5' fill='url(%23g1)'/%3E%3Ccircle cx='440' cy='160' r='6'/%3E%3Ccircle cx='440' cy='160' r='2' fill='url(%23g1)'/%3E%3Ccircle cx='560' cy='40' r='4'/%3E%3Ccircle cx='360' cy='190' r='5'/%3E%3Ccircle cx='280' cy='220' r='4'/%3E%3Ccircle cx='420' cy='115' r='5'/%3E%3Ccircle cx='340' cy='145' r='4'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M710 200 c0-20 16-36 36-36 c16 0 30 11 34 25 c11 2 20 12 20 24 c0 13-11 24-24 24 h-63 c-10 0-18-8-18-18 c0-8 5-15 13-17 z'/%3E%3Cpath d='M570 165 c0-14 11-25 25-25 c11 0 21 8 24 17 c8 2 14 9 14 17 c0 9-8 17-17 17 h-44 c-7 0-13-6-13-13 c0-5 4-11 9-12 z'/%3E%3Cpath d='M400 210 c0-11 9-20 20-20 c9 0 17 6 19 14 c6 1 11 7 11 14 c0 7-6 14-14 14 h-35 c-6 0-11-5-11-11 c0-4 3-9 7-10 z'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2'%3E%3Crect x='680' y='145' width='32' height='13' rx='2.5'/%3E%3Ccircle cx='688' cy='151.5' r='2' fill='url(%23g1)'/%3E%3Ccircle cx='695' cy='151.5' r='1.5'/%3E%3Crect x='490' y='155' width='26' height='11' rx='2'/%3E%3Ccircle cx='497' cy='160.5' r='1.5' fill='url(%23g1)'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='640' cy='180' rx='16' ry='5'/%3E%3Cpath d='M624 180 v20 c0 2.8 7.2 5 16 5 s16-2.2 16-5 v-20'/%3E%3Cpath d='M624 190 c0 2.8 7.2 5 16 5 s16-2.2 16-5'/%3E%3Cellipse cx='470' cy='200' rx='12' ry='4'/%3E%3Cpath d='M458 200 v15 c0 2.2 5.4 4 12 4 s12-1.8 12-4 v-15'/%3E%3Cpath d='M458 208 c0 2.2 5.4 4 12 4 s12-1.8 12-4'/%3E%3Cellipse cx='320' cy='175' rx='10' ry='3'/%3E%3Cpath d='M310 175 v12 c0 1.7 4.5 3 10 3 s10-1.3 10-3 v-12'/%3E%3Cpath d='M310 181 c0 1.7 4.5 3 10 3 s10-1.3 10-3'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='735' y='170' width='22' height='8' rx='1.5'/%3E%3Crect x='737' y='178' width='18' height='8' rx='1.5'/%3E%3Crect x='739' y='186' width='14' height='8' rx='1.5'/%3E%3Crect x='545' y='125' width='18' height='7' rx='1.5'/%3E%3Crect x='547' y='132' width='14' height='7' rx='1.5'/%3E%3Crect x='549' y='139' width='10' height='7' rx='1.5'/%3E%3Crect x='380' y='160' width='14' height='6' rx='1'/%3E%3Crect x='382' y='166' width='10' height='6' rx='1'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='760' y='85' width='18' height='30' rx='3'/%3E%3Ccircle cx='769' cy='108' r='2'/%3E%3Crect x='610' y='115' width='14' height='24' rx='2.5'/%3E%3Ccircle cx='617' cy='133' r='1.5'/%3E%3Crect x='295' y='135' width='11' height='18' rx='2'/%3E%3Ccircle cx='300.5' cy='148' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.product-card-full > *:not(.product-card-link) {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.product-card-full > .product-cta {
    pointer-events: auto;
}

.product-card-full:hover {
    border-color: var(--color-primary);
}

.product-card-half {
    grid-column: span 2;
}

.product-card-wide {
    grid-column: 1 / -1;
}

.product-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

.product-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-white);
    stroke: var(--color-white);
}

.product-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: var(--color-warning-alt);
    color: #000000;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-badge-new {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.product-badge-highlight {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: var(--color-white);
}

/* Server Grid for Featured Product Card */
.product-server-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
    padding: 1rem;
    background: rgba(11, 101, 174, 0.03);
    border-radius: 8px;
}

.product-server-column {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.product-server-label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-text-primary);
    margin-bottom: 0.25rem;
}

.product-server-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 150ms ease;
    position: relative;
    z-index: 2;
}

.product-server-link:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

@media (max-width: 480px) {
    .product-server-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* Featured Product Card (prominent) */
.product-card-featured {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(11, 101, 174, 0.03) 0%, rgba(11, 101, 174, 0.01) 100%);
    border: 2px solid var(--color-primary);
    box-shadow: 0 4px 16px rgba(11, 101, 174, 0.1);
}

.product-card-featured:hover {
    box-shadow: 0 8px 32px rgba(11, 101, 174, 0.2);
}

.product-card-featured .product-icon {
    width: 64px;
    height: 64px;
}

.product-card-featured .product-icon svg {
    width: 36px;
    height: 36px;
}

.product-card-featured .product-title {
    font-size: 1.75rem;
}

/* Legacy Products Section */
.legacy-products-section {
    grid-column: 1 / -1;
    margin-top: 0;
}

.legacy-products-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legacy-products-label::before {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-bs-gray-200);
}

.legacy-products-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-bs-gray-200);
}

/* Compact Product Cards Grid */
.product-cards-compact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    row-gap: 1.5rem;
    column-gap: 1.5rem;
}

/* 4-Column Product Cards Grid */
.product-cards-4col-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 1.5rem;
    column-gap: 1.5rem;
}

/* Compact Product Card */
.product-card-compact {
    padding: 1.5rem;
}

.product-card-compact .product-icon {
    width: 48px;
    height: 48px;
}

.product-card-compact .product-icon svg {
    width: 28px;
    height: 28px;
}

.product-card-compact .product-title {
    font-size: 1.125rem;
}

.product-card-compact .product-description {
    font-size: 0.9375rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .product-cards-compact-grid,
    .product-cards-4col-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .product-cards-4col-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.product-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.product-title a {
    color: var(--color-text-primary);
    text-decoration: none;
    transition: color 150ms ease;
    position: relative;
    z-index: 2;
}

.product-title a:hover {
    color: var(--color-primary);
}

.product-card-full .product-title {
    font-size: 1.5rem;
}

.product-description {
    color: var(--color-text-muted);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
}

.product-features {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0 0 0;
}

.product-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.product-feature svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.product-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9375rem;
    margin-top: auto;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    padding: 0.5rem;
    margin: -0.5rem;
    border-radius: 8px;
    overflow: hidden;
}

.product-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 0;
    height: 100%;
    background: radial-gradient(ellipse at left, rgba(11, 101, 174, 0.08) 0%, rgba(11, 101, 174, 0) 70%);
    transform: translateY(-50%);
    transition: width 600ms ease;
    z-index: -1;
}

.product-cta:hover {
    gap: 0.75rem;
    color: var(--color-primary-dark);
}

.product-cta:hover::before {
    width: 400px;
    height: 400px;
}

.product-cta svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 1200px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-card-half {
        grid-column: span 1;
    }
}

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

    .product-card {
        padding: 1.5rem;
    }
}

/* ============================================================================
   PRODUCT PAGE COMPONENTS
   Hero, Toggles, Pricing, Features, CTA, Details
   ============================================================================ */

/* OS/Product Toggle */
.os-toggle {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

.os-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 8px;
    background: var(--color-white);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 150ms ease;
}

.os-toggle-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.os-toggle-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.os-toggle-btn svg {
    width: 20px;
    height: 20px;
}

/* Pricing Section */
.pricing-section {
    margin: 3rem 0;
}

.pricing-toggle {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
    padding: 0.375rem;
    background: var(--color-bs-gray-100);
    border-radius: 12px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Enhanced variant for contract duration selector */
.pricing-toggle--enhanced {
    max-width: 600px;
    gap: 0.75rem;
    padding: 0.5rem;
}

.pricing-toggle-btn {
    flex: 1;
    padding: 0.625rem 1.25rem;
    border: none;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 8px;
    transition: all 150ms ease;
}

.pricing-toggle-btn.active {
    background: var(--color-white);
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Inline badge inside toggle button - subtle, not shouty */
.toggle-badge {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #047857;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid #6ee7b7;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(22, 163, 74, 0.25);
}

/* Container wrapper for enhanced toggle (contract duration selector) */
.pricing-toggle-container {
    max-width: 900px;
    margin: 0 auto 3rem auto;
    text-align: center;
    padding: 2rem 1rem;
    background: linear-gradient(135deg, var(--color-bs-gray-100) 0%, var(--color-white) 100%);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pricing-toggle-container__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
}

.pricing-toggle-container__note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 1.25rem 0 0 0;
}

.pricing-toggle-container__note-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/*
 * Unified Pricing Grid System
 * - Full content width, centered
 * - Explicit column counts for control
 * - Responsive: tablet 2 cols, mobile 1 col
 */
.pricing-grid {
    display: grid;
    gap: 1.25rem;
    margin: 2rem auto;
    width: 100%;
    max-width: 1200px;
    justify-content: center;
}

/* Column variants - use based on number of tariffs */
.pricing-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(200px, 320px));
}

.pricing-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

.pricing-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

/* For 5 tariffs: 3 + 2 layout (3 on first row centered, 2 on second centered) */
.pricing-grid--cols-5 {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

/* For 6 tariffs: 3 per row */
.pricing-grid--cols-6 {
    grid-template-columns: repeat(3, minmax(200px, 1fr));
}

/* Auto-fit fallback for legacy usage */
.pricing-grid:not([class*="--cols"]) {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Responsive: Tablet - 2 columns max */
@media (max-width: 1024px) {
    .pricing-grid--cols-3,
    .pricing-grid--cols-4,
    .pricing-grid--cols-5,
    .pricing-grid--cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: Mobile - 1 column */
@media (max-width: 640px) {
    .pricing-grid,
    .pricing-grid--cols-2,
    .pricing-grid--cols-3,
    .pricing-grid--cols-4,
    .pricing-grid--cols-5,
    .pricing-grid--cols-6 {
        grid-template-columns: 1fr;
        max-width: 400px;
    }
}

/* Single card centered (e.g., trial offer) */
.pricing-grid--single {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: 1fr;
}

/* Trial banner - clean full width layout */
.pricing-card.pricing-card--trial-banner {
    background: linear-gradient(135deg, #0b65ae 0%, #094d85 100%) !important;
    border: none !important;
    text-align: center;
    padding: 2rem !important;
    margin-bottom: 2rem;
}

.pricing-card.pricing-card--trial-banner:hover {
    transform: none;
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.25);
}

.pricing-card--trial-banner .pricing-badge {
    position: static;
    transform: none;
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    margin-bottom: 1rem;
}

.pricing-card--trial-banner h4 {
    color: #ffffff !important;
    font-size: 1.5rem;
    margin: 0 0 0.5rem 0;
}

.pricing-card--trial-banner p {
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 0 1rem 0;
}

.pricing-card--trial-banner .pricing-amount {
    color: #ffffff !important;
    margin-bottom: 1.25rem;
}

.pricing-card--trial-banner .pricing-amount span {
    color: #ffffff !important;
}

.pricing-card--trial-banner .pricing-amount small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.pricing-card--trial-banner .cta-primary {
    background: #ffffff;
    color: var(--color-primary) !important;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 150ms ease;
}

.pricing-card--trial-banner .cta-primary:hover {
    background: var(--color-info-bg);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.pricing-card {
    background: var(--color-white);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 200ms ease;
    position: relative;
}

.pricing-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.12);
}

.pricing-card.recommended {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.15);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.pricing-size {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
    text-align: center;
}

.pricing-specs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid var(--color-bs-gray-200);
    border-bottom: 1px solid var(--color-bs-gray-200);
}

.pricing-spec {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.pricing-spec-label {
    color: var(--color-text-muted);
}

.pricing-spec-value {
    font-weight: 600;
    color: var(--color-text-primary);
}

.pricing-price {
    text-align: center;
    margin: 1rem 0;
}

.pricing-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1;
}

.pricing-period {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Features Section */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
}

.feature-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem;
}

.feature-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.feature-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-white);
}

.feature-card h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.feature-card p {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* CTA Box */
.cta-box {
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border: 1px solid var(--color-info-border);
    border-radius: 12px;
    padding: 2rem;
    margin: 3rem 0;
    text-align: center;
}

.cta-box h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.cta-box p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    margin: 0 0 1.5rem 0;
}

.cta-box-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    border-radius: 50%;
    color: var(--color-white);
}

.cta-box-icon svg {
    width: 28px;
    height: 28px;
}

.cta-box-hint {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 1rem 0 0 0;
    font-family: var(--font-mono, monospace);
}

/* Global CTA Group and Buttons */
.cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-primary,
.cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 150ms ease;
}

.cta-primary {
    background: var(--color-primary);
    color: var(--color-white) !important;
}

.cta-primary:hover {
    background: var(--color-primary-dark);
    text-decoration: none;
}

.cta-secondary {
    background: transparent;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary);
}

.cta-secondary:hover {
    background: var(--color-primary);
    color: var(--color-white) !important;
    text-decoration: none;
}

.cta-primary svg,
.cta-secondary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Details Section */
.details-section {
    margin: 4rem 0 2rem 0;
}

.details-section h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1.5rem 0;
}

.details-content {
    max-width: 100%;
    margin: 0;
}

/* Details Groups (Collapsible Sections) */
.details-group {
    background: var(--color-white);
    border: 1px solid var(--color-gray-350);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.details-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-bs-gray-100);
    border-radius: 8px;
}

.details-header:hover {
    background: var(--color-bs-gray-200);
}

.details-header svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    stroke: currentColor;
}

.details-body {
    padding: 1.5rem;
}

.details-body .details-note {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-bs-gray-100);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.details-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.details-table thead th {
    background: var(--color-bs-gray-100);
    border-bottom: 2px solid var(--color-gray-350);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.details-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-gray-350);
    vertical-align: top;
}

.details-table tbody tr:last-child td {
    border-bottom: none;
}

.details-table tbody td:first-child {
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Flexible column widths for consistent alignment */
.details-table th:first-child,
.details-table td:first-child {
    width: 30%;
    min-width: 150px;
}

.details-table th:not(:first-child),
.details-table td:not(:first-child) {
    text-align: center;
}

/* All-tariffs row: visually distinct for features that apply to all plans */
.details-table tbody tr.all-tariffs td[colspan] {
    background: var(--color-bs-gray-50);
    text-align: center;
    font-weight: 500;
    color: var(--color-text-primary);
}

.details-table tbody tr.all-tariffs td:first-child {
    background: transparent;
    text-align: left;
}

.details-content h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 2rem 0 0.75rem 0;
}

.details-content p {
    font-size: 1rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin: 0 0 1rem 0;
}

.details-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.details-content ul li {
    margin-bottom: 0.5rem;
    line-height: 1.7;
}

/* Responsive - Product Page Components */
@media (max-width: 768px) {
    .product-hero h1 {
        font-size: 1.75rem;
    }

    /* Note: .pricing-grid responsive rules are defined with the Unified Pricing Grid System above */

    .pricing-card {
        padding: 1rem;
    }

    .pricing-size {
        font-size: 1.25rem;
    }

    .pricing-amount {
        font-size: 1.5rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .os-toggle {
        flex-direction: column;
    }

    .cta-buttons {
        flex-direction: column;
    }
}

/* Trust Bar */
.trust-bar {
    background: linear-gradient(135deg, var(--color-bs-gray-100) 0%, var(--color-white) 100%);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 16px;
    padding: 2rem;
    margin: 3rem 0;
    max-width: 100%;
}

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

.trust-item {
    text-align: center;
}

.trust-icon {
    width: 48px;
    height: 48px;
    background: transparent;
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.trust-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    stroke: var(--color-primary);
}

.trust-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem 0;
}

.trust-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

.trust-partners {
    border-top: 1px solid var(--color-bs-gray-200);
    padding-top: 1.5rem;
}

.trust-partners-label {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.trust-logos {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    row-gap: 1.5rem;
    flex-wrap: wrap;
}

.trust-logo {
    opacity: 0.6;
    transition: opacity 150ms ease;
    height: 64px;
    width: auto;
}

.trust-logo:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .trust-bar {
        padding: 1.5rem;
        margin: 2rem auto;
    }

    .trust-items {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .trust-logos {
        gap: 1.5rem;
    }

    .trust-logo {
        height: 28px;
    }
}

/* ============================================================================
   PARTNER PAGE
   ============================================================================ */

.partner-hero {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(11, 101, 174, 0.08) 0%, rgba(11, 101, 174, 0.02) 100%);
    border-radius: 16px;
    margin-bottom: 3rem;
}

.partner-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.partner-hero h2 {
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0 0 1.5rem 0;
}

.partner-intro {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 800px;
    margin: 0 auto;
}

.partner-intro a {
    color: var(--color-primary);
    font-weight: 600;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.partner-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    transition: all 150ms ease;
    display: flex;
    flex-direction: column;
}

.partner-card:hover {
    box-shadow: 0 4px 16px rgba(11, 101, 174, 0.15);
    border-color: var(--color-primary);
}

.partner-logo {
    text-align: center;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-150);
    border-radius: 8px;
}

.partner-logo img {
    max-width: 180px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.partner-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.partner-website {
    margin-bottom: 1rem;
}

.partner-website a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    transition: color 150ms ease;
}

.partner-website a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.partner-description {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 0.9375rem;
    flex: 1;
}

.partner-cta-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
}

.partner-cta-card:hover {
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.3);
}

.partner-cta-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
    font-weight: 700;
}

.partner-cta-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 1rem 0;
}

.partner-cta-text {
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.partner-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-white);
    color: var(--color-primary) !important;
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    transition: all 250ms cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.partner-cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(11, 101, 174, 0.08) 0%, rgba(11, 101, 174, 0) 70%);
    transform: translate(-50%, -50%);
    transition: width 600ms ease, height 600ms ease;
}

.partner-cta-button:hover {
    background: var(--color-bs-gray-100);
    text-decoration: none;
}

.partner-cta-button:hover::before {
    width: 500px;
    height: 500px;
}

@media (max-width: 768px) {
    .partners-grid {
        grid-template-columns: 1fr;
    }

    .partner-hero h1 {
        font-size: 2rem;
    }
}

/* ============================================================================
   FOOTER NOTICES
   ============================================================================ */

/**
 * Footer Notice
 * Small legal/pricing notices at the bottom of product pages
 */
.footer-notice {
    margin-top: 1.5rem;
}

/* ============================================================================
   UNIFIED CONTENT PAGE COMPONENTS
   Standardized components to replace inline styles in content/*.php files
   ============================================================================ */

/* ----------------------------------------------------------------------------
   CONTENT HERO SECTION
   Gradient hero section for all content pages
   ---------------------------------------------------------------------------- */

.content-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 3rem 2rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    text-align: center;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* VPS-specific hero with background image */
.content-hero.vps-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    position: relative;
}

/* Datacenter hero with background image (WebP optimized, 593KB vs 771KB JPG) */
.content-hero.datacenter-hero {
    background: linear-gradient(135deg, rgba(11, 101, 174, 0.7) 0%, rgba(7, 67, 115, 0.75) 100%),
                url('/assets/hero-images/datacenter.webp') center center / cover no-repeat;
    min-height: 320px;
}

/* Loesungen hero with cloud visual background */
.content-hero.loesungen-hero {
    position: relative;
    overflow: hidden;
}

.content-hero.loesungen-hero::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 700px;
    height: 380px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 420'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.20'/%3E%3Cstop offset='50%25' stop-color='%23ffffff' stop-opacity='0.08'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23ffffff' stop-opacity='0.15'/%3E%3Cstop offset='60%25' stop-color='%23ffffff' stop-opacity='0.05'/%3E%3Cstop offset='100%25' stop-color='%23ffffff' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none'%3E%3Cpath stroke='url(%23g2)' stroke-width='1.5' d='M770 50 Q700 80 630 60 Q560 40 490 70 Q420 100 350 70 Q280 40 210 70 Q140 100 70 70'/%3E%3Cpath stroke='url(%23g2)' stroke-width='1.5' d='M780 100 Q710 130 640 110 Q570 90 500 120 Q430 150 360 120 Q290 90 220 120 Q150 150 80 120'/%3E%3Cpath stroke='url(%23g2)' stroke-width='1.5' d='M790 150 Q720 180 650 160 Q580 140 510 170 Q440 200 370 170 Q300 140 230 170 Q160 200 90 170'/%3E%3Cg stroke='url(%23g1)' stroke-width='1.5'%3E%3Cline x1='720' y1='70' x2='660' y2='110'/%3E%3Cline x1='720' y1='70' x2='750' y2='130'/%3E%3Cline x1='720' y1='70' x2='630' y2='55'/%3E%3Cline x1='720' y1='70' x2='770' y2='50'/%3E%3Cline x1='720' y1='70' x2='705' y2='30'/%3E%3Cline x1='660' y1='110' x2='750' y2='130'/%3E%3Cline x1='660' y1='110' x2='580' y2='95'/%3E%3Cline x1='630' y1='55' x2='580' y2='95'/%3E%3Cline x1='580' y1='95' x2='510' y2='130'/%3E%3Cline x1='510' y1='130' x2='440' y2='160'/%3E%3Cline x1='630' y1='55' x2='560' y2='40'/%3E%3Cline x1='440' y1='160' x2='360' y2='190'/%3E%3Cline x1='360' y1='190' x2='280' y2='220'/%3E%3Cline x1='510' y1='130' x2='420' y2='115'/%3E%3Cline x1='420' y1='115' x2='340' y2='145'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2'%3E%3Ccircle cx='720' cy='70' r='12'/%3E%3Ccircle cx='720' cy='70' r='5' fill='url(%23g1)'/%3E%3Ccircle cx='660' cy='110' r='10'/%3E%3Ccircle cx='660' cy='110' r='4' fill='url(%23g1)'/%3E%3Ccircle cx='750' cy='130' r='8'/%3E%3Ccircle cx='750' cy='130' r='3' fill='url(%23g1)'/%3E%3Ccircle cx='630' cy='55' r='9'/%3E%3Ccircle cx='630' cy='55' r='3.5' fill='url(%23g1)'/%3E%3Ccircle cx='580' cy='95' r='8'/%3E%3Ccircle cx='580' cy='95' r='3' fill='url(%23g1)'/%3E%3Ccircle cx='510' cy='130' r='7'/%3E%3Ccircle cx='510' cy='130' r='2.5' fill='url(%23g1)'/%3E%3Ccircle cx='770' cy='50' r='6'/%3E%3Ccircle cx='770' cy='50' r='2' fill='url(%23g1)'/%3E%3Ccircle cx='705' cy='30' r='7'/%3E%3Ccircle cx='705' cy='30' r='2.5' fill='url(%23g1)'/%3E%3Ccircle cx='440' cy='160' r='6'/%3E%3Ccircle cx='440' cy='160' r='2' fill='url(%23g1)'/%3E%3Ccircle cx='560' cy='40' r='4'/%3E%3Ccircle cx='360' cy='190' r='5'/%3E%3Ccircle cx='280' cy='220' r='4'/%3E%3Ccircle cx='420' cy='115' r='5'/%3E%3Ccircle cx='340' cy='145' r='4'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M710 200 c0-20 16-36 36-36 c16 0 30 11 34 25 c11 2 20 12 20 24 c0 13-11 24-24 24 h-63 c-10 0-18-8-18-18 c0-8 5-15 13-17 z'/%3E%3Cpath d='M570 165 c0-14 11-25 25-25 c11 0 21 8 24 17 c8 2 14 9 14 17 c0 9-8 17-17 17 h-44 c-7 0-13-6-13-13 c0-5 4-11 9-12 z'/%3E%3Cpath d='M400 210 c0-11 9-20 20-20 c9 0 17 6 19 14 c6 1 11 7 11 14 c0 7-6 14-14 14 h-35 c-6 0-11-5-11-11 c0-4 3-9 7-10 z'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2'%3E%3Crect x='680' y='145' width='32' height='13' rx='2.5'/%3E%3Ccircle cx='688' cy='151.5' r='2' fill='url(%23g1)'/%3E%3Ccircle cx='695' cy='151.5' r='1.5'/%3E%3Crect x='490' y='155' width='26' height='11' rx='2'/%3E%3Ccircle cx='497' cy='160.5' r='1.5' fill='url(%23g1)'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='640' cy='180' rx='16' ry='5'/%3E%3Cpath d='M624 180 v20 c0 2.8 7.2 5 16 5 s16-2.2 16-5 v-20'/%3E%3Cpath d='M624 190 c0 2.8 7.2 5 16 5 s16-2.2 16-5'/%3E%3Cellipse cx='470' cy='200' rx='12' ry='4'/%3E%3Cpath d='M458 200 v15 c0 2.2 5.4 4 12 4 s12-1.8 12-4 v-15'/%3E%3Cpath d='M458 208 c0 2.2 5.4 4 12 4 s12-1.8 12-4'/%3E%3Cellipse cx='320' cy='175' rx='10' ry='3'/%3E%3Cpath d='M310 175 v12 c0 1.7 4.5 3 10 3 s10-1.3 10-3 v-12'/%3E%3Cpath d='M310 181 c0 1.7 4.5 3 10 3 s10-1.3 10-3'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='735' y='170' width='22' height='8' rx='1.5'/%3E%3Crect x='737' y='178' width='18' height='8' rx='1.5'/%3E%3Crect x='739' y='186' width='14' height='8' rx='1.5'/%3E%3Crect x='545' y='125' width='18' height='7' rx='1.5'/%3E%3Crect x='547' y='132' width='14' height='7' rx='1.5'/%3E%3Crect x='549' y='139' width='10' height='7' rx='1.5'/%3E%3Crect x='380' y='160' width='14' height='6' rx='1'/%3E%3Crect x='382' y='166' width='10' height='6' rx='1'/%3E%3C/g%3E%3Cg stroke='url(%23g1)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='760' y='85' width='18' height='30' rx='3'/%3E%3Ccircle cx='769' cy='108' r='2'/%3E%3Crect x='610' y='115' width='14' height='24' rx='2.5'/%3E%3Ccircle cx='617' cy='133' r='1.5'/%3E%3Crect x='295' y='135' width='11' height='18' rx='2'/%3E%3Ccircle cx='300.5' cy='148' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 0;
}

.content-hero.loesungen-hero > * {
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .content-hero.loesungen-hero::before {
        width: 250px;
        height: 180px;
        right: -60px;
        opacity: 0.25;
    }
}

/* Hero Stats (for datacenter, etc.) */
.hero-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 0;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    flex-wrap: wrap;
}

.hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1.2;
}

.hero-stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .hero-stats {
        gap: 1.5rem;
    }

    .hero-stat-number {
        font-size: 2rem;
    }
}

/* Compact hero for error/info pages */
.content-hero--compact {
    min-height: 180px;
    padding: 2rem 1.5rem;
    margin-bottom: 2rem;
}

.content-hero--compact .content-hero-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
}

.content-hero--compact h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.content-hero--compact h2 {
    font-size: 1rem;
    margin-bottom: 0;
}

.content-hero h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.content-hero .subtitle,
.content-hero h2 {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.content-hero .subtitle:last-child,
.content-hero h2:last-child {
    margin-bottom: 0;
}

.content-hero .hero-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto 2rem auto;
}

/* Hero Logo */
.content-hero-logo {
    max-width: 200px;
    height: auto;
    margin: 0 auto 2rem auto;
    display: block;
    background: var(--color-white);
    padding: 1rem;
    border-radius: 8px;
}

/* Hero Logo Transparent (no background) - sized like hero icon */
.content-hero-logo--transparent {
    background: none;
    padding: 0;
    max-width: 96px;
    max-height: 96px;
    margin-bottom: 1.5rem;
}

/* Hero Icon */
.content-hero-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 1.5rem;
    display: block;
    filter: brightness(0) invert(1); /* Make SVG white on blue background */
}

/* Hero CTA Button Group - Style from loesungen.php */
.content-hero .cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.content-hero .cta-primary {
    background: var(--color-white);
    color: var(--color-primary) !important;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.2;
    transition: all 150ms ease;
}

.content-hero .cta-primary:hover {
    background: var(--color-info-bg);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.content-hero .cta-primary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.content-hero .cta-secondary {
    background: transparent;
    color: var(--color-white) !important;
    border: 2px solid var(--color-white);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.2;
    transition: all 150ms ease;
}

.content-hero .cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.content-hero .cta-secondary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Horizontal Hero Layout - Logo above title */
.content-hero--horizontal {
    flex-direction: column;
    text-align: center;
    padding: 2rem 2.5rem;
    min-height: auto;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.content-hero--horizontal .content-hero-brand {
    display: flex;
    align-items: center;
    justify-content: center;
}

.content-hero--horizontal .content-hero-logo {
    margin: 0;
    max-width: 80px;
    max-height: 80px;
}

.content-hero--horizontal .content-hero-content {
    flex: none;
}

.content-hero--horizontal h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.content-hero--horizontal .subtitle,
.content-hero--horizontal h2 {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    max-width: none;
}

.content-hero--horizontal .hero-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
}

.content-hero--horizontal .hero-price {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
}

.content-hero--horizontal .hero-badge {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
}

.content-hero--horizontal .cta-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.content-hero--horizontal .cta-primary,
.content-hero--horizontal .cta-secondary {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
    .content-hero--horizontal {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
        gap: 1rem;
    }

    .content-hero--horizontal .content-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .content-hero--horizontal h1,
    .content-hero--horizontal h2 {
        text-align: center;
        width: 100%;
    }

    .content-hero--horizontal .hero-meta {
        justify-content: center;
    }

    .content-hero--horizontal .cta-buttons {
        justify-content: center;
    }

    .content-hero {
        min-height: 220px;
    }

    .content-hero h1 {
        font-size: 1.75rem;
    }

    .content-hero .subtitle,
    .content-hero h2 {
        font-size: 1rem;
    }

    .content-hero-logo {
        max-width: 160px;
    }

    .content-hero .cta-group {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ----------------------------------------------------------------------------
   FEATURE GRID & CARDS
   Grid layout for features, benefits, services
   ---------------------------------------------------------------------------- */

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.feature-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 150ms ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.feature-card:hover {
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.15);
    border-color: var(--color-primary);
}

.feature-card img {
    margin-bottom: 1.5rem;
    max-width: 80px;
    height: auto;
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem auto;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.feature-icon--round {
    border-radius: 50%;
}

.feature-icon--square {
    border-radius: 12px;
}

/* Feature icon variant for partner logos instead of SVG icons */
.feature-icon--logo img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.feature-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-white);
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.feature-card h3,
.feature-card h4 {
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.feature-card p {
    color: var(--color-gray-700);
    line-height: 1.6;
    margin: 0;
}

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

/* ----------------------------------------------------------------------------
   INFO BOX
   Colored information/intro boxes with left border accent
   ---------------------------------------------------------------------------- */

.info-box {
    background: var(--color-bs-gray-100);
    border-left: 4px solid var(--color-primary);
    padding: 2rem;
    border-radius: 8px;
    margin: 3rem 0;
}

.info-box h2,
.info-box h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.info-box p {
    color: var(--color-gray-700);
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.info-box p:last-child {
    margin-bottom: 0;
}

.info-box > *:last-child {
    margin-bottom: 0 !important;
}

.info-box ul {
    margin: 0 0 1rem 0;
    padding-left: 1.5rem;
    color: var(--color-gray-700);
}

.info-box ul:last-child {
    margin-bottom: 0;
}

.info-box li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.info-box li:last-child {
    margin-bottom: 0;
}

.info-box--success {
    border-left-color: var(--color-success-alt);
    background: var(--color-success-bg-alt);
}

.info-box--warning {
    border-left-color: var(--color-warning-alt);
    background: var(--color-warning-bg);
}

.info-box--error {
    border-left-color: #dc3545;
    background: #f8d7da;
}

.info-box--error h2,
.info-box--error h3 {
    color: #dc3545;
}

/* Highlight variant for promotional/advertising boxes */
.info-box--highlight {
    border-left-color: #00c8d4;
    background: #e0f7fa;
}

.info-box--highlight h2,
.info-box--highlight h3 {
    color: #00838f;
}

/* Neutral/info variant with shadow instead of border */
.info-box--neutral {
    border-left: none;
    background: var(--color-white);
    box-shadow: 0 2px 8px rgba(73, 76, 83, 0.15);
}

/* ----------------------------------------------------------------------------
   FORM MESSAGES
   Inline form feedback messages (success, error, info)
   ---------------------------------------------------------------------------- */

.form-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.form-message svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    flex-shrink: 0;
}

.form-message span {
    flex: 1;
}

.form-message--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.form-message--error svg {
    stroke: #dc2626;
}

.form-message--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.form-message--success svg {
    stroke: #16a34a;
}

.form-message--info {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    color: #2563eb;
}

.form-message--info svg {
    stroke: #2563eb;
}

.form-message--warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #d97706;
}

.form-message--warning svg {
    stroke: #d97706;
}

/* Form message with action button */
.form-message--with-action {
    flex-wrap: wrap;
}

.form-message-content {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-message-content strong {
    font-weight: 600;
}

.form-message-content span {
    font-weight: 400;
    opacity: 0.9;
}

.form-message--with-action .btn {
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .form-message--with-action {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-message--with-action .btn {
        margin-top: 0.75rem;
        width: 100%;
        text-align: center;
    }
}

/* ----------------------------------------------------------------------------
   BENEFITS SECTION
   Benefits list with icons and descriptions
   ---------------------------------------------------------------------------- */

.benefits-section {
    background: var(--color-bs-gray-100);
    border-left: 4px solid var(--color-primary);
    padding: 2rem;
    border-radius: 8px;
    margin: 3rem 0;
}

.benefits-section h2 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    font-size: 1.75rem;
    font-weight: 700;
}

.benefits-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.benefit-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.benefit-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon svg {
    width: 16px;
    height: 16px;
    color: var(--color-white);
}

.benefit-content h4 {
    color: var(--color-secondary-dark);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.benefit-content p {
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.5;
}

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

/* ----------------------------------------------------------------------------
   PRICING CATEGORY & CARDS (Cloud Backup section)
   Note: .pricing-grid now uses unified system from above
   ---------------------------------------------------------------------------- */

.pricing-category {
    margin: 3rem 0;
}

.pricing-category h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary-dark);
    margin-bottom: 1.5rem;
    text-align: center;
}

.pricing-card {
    background: var(--color-white);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 150ms ease;
}

.pricing-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.12);
}

.pricing-card--featured {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.12);
}

.pricing-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 1rem;
    white-space: nowrap;
}

.pricing-amount {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: 1.5rem 0;
    line-height: 1;
}

.pricing-amount small {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-gray-700);
}

.pricing-note {
    color: var(--color-gray-700);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

/* Responsive - pricing-amount only (grid handled by unified system) */
@media (max-width: 768px) {
    .pricing-category .pricing-amount {
        font-size: 2rem;
    }
}

/* ----------------------------------------------------------------------------
   USE CASES SECTION
   ---------------------------------------------------------------------------- */

.use-cases-section {
    margin: 3rem 0;
}

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

.use-case {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.use-case h4 {
    color: var(--color-primary);
    margin-bottom: 0.75rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.use-case p {
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.6;
}

/* ----------------------------------------------------------------------------
   TRUST/STATS SECTION
   ---------------------------------------------------------------------------- */

.trust-section {
    background: linear-gradient(135deg, var(--color-info-bg) 0%, #e8f3ff 100%);
    padding: 2rem;
    border-radius: 12px;
    margin: 3rem 0;
}

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

.trust-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    text-align: center;
}

.trust-item {
    padding: 1rem;
}

.trust-item .trust-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.trust-item .trust-label {
    color: var(--color-gray-700);
    font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
    .trust-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----------------------------------------------------------------------------
   CTA FINAL SECTION
   Final call-to-action section with gradient background
   ---------------------------------------------------------------------------- */

.cta-final {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 3rem 2rem;
    border-radius: 12px;
    text-align: center;
    margin: 3rem 0;
}

.cta-final h3 {
    color: var(--color-white);
    margin-bottom: 1rem;
    font-size: 2rem;
    font-weight: 700;
}

.cta-final p {
    color: var(--color-white);
    opacity: 0.95;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    line-height: 1.6;
}

.cta-final .button-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-final .btn-white {
    background: var(--color-white);
    color: var(--color-primary) !important;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    transition: all 150ms ease;
}

.cta-final .btn-white:hover {
    background: var(--color-info-bg);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.cta-final .btn-outline {
    background: transparent;
    color: var(--color-white) !important;
    border: 2px solid var(--color-white);
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.2;
    transition: all 150ms ease;
}

.cta-final .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cta-final .btn-outline svg,
.cta-final .btn-white svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .cta-final .button-group {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ----------------------------------------------------------------------------
   FORM CARD
   Generic form card for login, contact forms, etc.
   ---------------------------------------------------------------------------- */

.form-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    margin-bottom: 3rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.form-card-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-bs-gray-200);
}

.form-card-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.2);
}

.form-card-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-white);
}

.form-card h2,
.form-card h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
}

.form-card p {
    font-size: 1rem;
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 768px) {
    .form-card {
        padding: 2rem 1.5rem;
    }
}

/* ----------------------------------------------------------------------------
   SERVICE/CONTACT CARDS
   For contact info, service descriptions
   ---------------------------------------------------------------------------- */

.service-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.service-card h3 {
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-bs-gray-200);
}

.contact-phone {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 1rem 0;
}

.contact-phone small {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-gray-700);
    margin-top: 0.25rem;
}

/* ----------------------------------------------------------------------------
   TOGGLE/ACCORDION
   For expandable details sections
   ---------------------------------------------------------------------------- */

.toggle-link {
    color: var(--color-white);
    background-color: var(--color-secondary);
    font-weight: 700;
    font-size: 0.6875rem;
    text-decoration: none;
    vertical-align: top;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    margin-right: 0.5rem;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    transition: background 150ms ease;
}

.toggle-link:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.toggle-details {
    display: none;
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    background: var(--color-bs-gray-100);
    border-radius: 4px;
    margin: 0.5rem 0 0.25rem 0;
    font-size: 0.9em;
    border: 1px solid var(--color-bs-gray-200);
}

/* HTML5 details/summary - semantic toggle without JS */
.domain-cell .inline-details-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.25rem;
}

details.inline-details {
    display: inline-block;
    margin-right: 0.5rem;
    vertical-align: top;
}

details.inline-details[open] {
    display: block;
    width: 100%;
    margin-right: 0;
}

details.inline-details > summary {
    color: var(--color-white);
    background-color: var(--color-secondary);
    font-weight: 700;
    font-size: 0.6875rem;
    text-decoration: none;
    vertical-align: top;
    border-radius: 4px;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    user-select: none;
    display: inline-block;
    transition: background 150ms ease;
    list-style: none;
}

details.inline-details > summary::-webkit-details-marker {
    display: none;
}

details.inline-details > summary:hover {
    background-color: var(--color-primary);
}

details.inline-details[open] > summary {
    background-color: var(--color-primary);
}

details.inline-details > .details-content {
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    background: var(--color-bs-gray-100);
    border-radius: 4px;
    margin: 0.5rem 0 0.25rem 0;
    font-size: 0.9em;
    border: 1px solid var(--color-bs-gray-200);
}

/* ----------------------------------------------------------------------------
   DOCUMENT LINKS
   For downloadable document lists
   ---------------------------------------------------------------------------- */

.document-list {
    background: var(--color-white);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    margin: 3rem 0;
}

.document-list h3 {
    color: var(--color-secondary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

.document-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--color-bs-gray-100);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 8px;
    text-decoration: none;
    transition: all 150ms ease;
    margin-bottom: 1rem;
}

.document-link:last-child {
    margin-bottom: 0;
}

.document-link:hover {
    background: var(--color-bs-gray-200);
    border-color: var(--color-primary);
}

.document-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.document-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-white);
}

.document-content {
    flex: 1;
}

.document-title {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.0625rem;
    margin-bottom: 0.25rem;
}

.document-meta {
    color: var(--color-gray-700);
    font-size: 0.875rem;
}

/* ----------------------------------------------------------------------------
   SOLUTION CARD (specific to loesungen.php style)
   ---------------------------------------------------------------------------- */

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.solution-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 150ms ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.solution-card:hover {
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.15);
    border-color: var(--color-primary);
}

.solution-card img {
    margin-bottom: 1.5rem;
}

.solution-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #0d7fd4 100%);
    border-radius: 16px;
    color: var(--color-white);
}

.solution-icon svg {
    width: 32px;
    height: 32px;
}

.solution-card h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 700;
}

.solution-card p {
    color: var(--color-gray-700);
    line-height: 1.6;
    margin: 0;
}

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

/* ----------------------------------------------------------------------------
   CONTACT BOX
   Unified contact box style (from microsoft-365-backup.php)
   ---------------------------------------------------------------------------- */

.contact-box {
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 16px;
    padding: 3rem 2rem;
    text-align: center;
    margin: 3rem 0;
}

.contact-box h3 {
    color: var(--color-primary);
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.contact-box p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.contact-box-phone {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white) !important;
    padding: 1rem 3rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 150ms ease;
    box-shadow: 0 4px 16px rgba(11, 101, 174, 0.25);
}

.contact-box-phone:hover {
    box-shadow: 0 6px 24px rgba(11, 101, 174, 0.35);
    color: var(--color-white) !important;
}

.contact-box-phone svg {
    width: 28px;
    height: 28px;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-box {
        padding: 2rem 1.5rem;
    }
    
    .contact-box h3 {
        font-size: 1.5rem;
    }
    
    .contact-box p {
        font-size: 1rem;
    }
    
    .contact-box-phone {
        font-size: 1.25rem;
        padding: 0.875rem 2rem;
    }
}

/* ----------------------------------------------------------------------------
   FEATURES SECTION
   For feature lists with icons (used in cloud-backup, cloud-connect, etc.)
   ---------------------------------------------------------------------------- */

.features-section {
    margin: 3rem 0;
}

.features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.feature-content h4 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.feature-content p {
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   SERVICE SECTION
   For service cards with icons
   ---------------------------------------------------------------------------- */

.service-section {
    margin: 3rem 0;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* ----------------------------------------------------------------------------
   GUARANTEE SECTION
   For guarantee/warranty sections
   ---------------------------------------------------------------------------- */

.guarantee-section {
    background: linear-gradient(135deg, var(--color-success-bg-alt) 0%, var(--color-success-border) 100%);
    border: 2px solid #a5d6a7;
    border-left: 4px solid var(--color-success-alt);
    border-radius: 12px;
    padding: 2rem;
    margin: 3rem 0;
}

.guarantee-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
}

.guarantee-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(40, 167, 69, 0.1);
}

.guarantee-item:last-child {
    border-bottom: none;
}

.guarantee-item svg {
    width: 24px;
    height: 24px;
    color: var(--color-success-alt);
    flex-shrink: 0;
    margin-top: 2px;
}

.guarantee-item strong {
    color: #155724;
}

/* Guarantees Section with Cards */
.guarantees-section {
    margin: 3rem 0;
    padding: 2.5rem 2rem;
    background: var(--color-bs-gray-50);
    border-radius: 16px;
}

.guarantees-section h2 {
    text-align: center;
    margin-bottom: 0.75rem;
    font-size: 1.75rem;
    color: var(--color-text-primary);
}

.guarantees-section > p {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.guarantee-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 0 auto;
    max-width: 1200px;
}

.guarantee-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: all 0.2s ease;
}

.guarantee-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.1);
    transform: translateY(-2px);
}

.guarantee-icon {
    width: 40px;
    height: 40px;
    color: var(--color-primary);
    margin: 0 auto 0.75rem;
    display: block;
}

.guarantee-card h3,
.guarantee-card h4 {
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.guarantee-card p {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .guarantees-section {
        padding: 2rem 1.25rem;
    }

    .guarantee-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .guarantee-card {
        padding: 1.25rem 0.75rem;
    }
}

@media (max-width: 600px) {
    .guarantee-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 400px) {
    .guarantee-cards {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
   HERO LOGO
   Logo in hero sections
   ---------------------------------------------------------------------------- */

.hero-logo {
    max-width: 200px;
    height: auto;
    margin: 0 auto 2rem auto;
    display: block;
}

/* ----------------------------------------------------------------------------
   STATS GRID
   For statistics display (e.g., DDoS protection stats)
   ---------------------------------------------------------------------------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.stat-item {
    text-align: center;
    padding: 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 8px;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.stat-label {
    color: var(--color-gray-700);
    font-size: 0.95rem;
}

/* ----------------------------------------------------------------------------
   FEATURES GRID
   Alternative grid layout for feature cards
   ---------------------------------------------------------------------------- */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.feature-tag {
    display: inline-block;
    background: #e7f3ff;
    color: var(--color-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8125rem;
    font-weight: 600;
    margin-top: 0.75rem;
}

/* ----------------------------------------------------------------------------
   PROCESS SECTION
   For "How it works" step-by-step processes
   ---------------------------------------------------------------------------- */

.process-section {
    margin: 3rem 0;
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.process-step {
    position: relative;
    padding: 2rem;
    background: var(--color-white);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
}

.process-step .step-number {
    position: absolute;
    top: -1rem;
    left: 2rem;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.25);
}

.process-step h4 {
    color: var(--color-primary);
    margin: 1rem 0 0.75rem 0;
    font-size: 1.2rem;
    font-weight: 600;
}

.process-step p {
    color: var(--color-gray-700);
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .features-list,
    .service-grid,
    .features-grid,
    .process-steps {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   KRITISCHE FEHLENDE KLASSEN FÜR KONVERTIERTE SEITEN
   ============================================================================ */

/* ----------------------------------------------------------------------------
   BENEFITS SECTION (bereits teilweise definiert, hier erweitert)
   ---------------------------------------------------------------------------- */

.benefits-section h3 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
}

/* ----------------------------------------------------------------------------
   PRICING SPECIFICATIONS
   Für Preistabellen-Spezifikationen
   ---------------------------------------------------------------------------- */

.pricing-spec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-bs-gray-200);
}

.pricing-spec:last-child {
    border-bottom: none;
}

.pricing-spec-label {
    color: var(--color-gray-700);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-spec-label svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.pricing-spec-value {
    font-weight: 600;
    color: var(--color-primary);
}

.pricing-spec-value svg {
    width: 20px;
    height: 20px;
    color: var(--color-success-alt);
}

/* ----------------------------------------------------------------------------
   PRICING CARD ERWEITERT
   Zusätzliche Pricing-Card Elemente
   ---------------------------------------------------------------------------- */

.pricing-card.featured {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.12);
    position: relative;
}

.pricing-badge.free {
    background: var(--color-success-alt);
}

.pricing-badge.trial {
    background: #17a2b8;
}

/* ----------------------------------------------------------------------------
   BUTTONS SYSTEM
   Vollständiges Button-System
   ---------------------------------------------------------------------------- */

.btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 1.5rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1 !important;
    text-decoration: none;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
    vertical-align: middle;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 400ms ease, height 400ms ease;
}

.btn-primary::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
}

.btn-secondary::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
}

.btn:hover::before {
    width: 500px;
    height: 500px;
}

.btn-primary,
button.btn-primary,
a.btn-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white) !important;
    border: none;
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.25);
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border: none;
    color: var(--color-white) !important;
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.35);
}

.btn-secondary {
    background: var(--color-white);
    color: var(--color-primary) !important;
    border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
    background: var(--color-primary);
    color: var(--color-white) !important;
    border: 2px solid var(--color-primary);
}

.btn-sm {
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 1rem !important;
    font-size: 0.875rem;
}

.btn-block {
    width: 100%;
    display: block;
    text-align: center;
}

/* Button group - horizontal button arrangement */
.btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.btn-group .btn {
    flex: 0 0 auto;
}

.btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.btn-sm svg {
    width: 14px;
    height: 14px;
}

/* Button group - compact for table cells */
.btn-group-compact {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.btn-group-compact .btn {
    padding: 0.375rem 0.625rem;
    font-size: 0.8125rem;
}

.btn-group-compact .btn svg {
    width: 15px;
    height: 15px;
}

/* Inline forms - display forms inline */
.inline-form {
    display: contents;
}

.btn-group-compact .inline-form {
    display: contents;
}

/* Button with icon on the left */
.btn-icon-left {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-icon-left svg {
    width: 18px;
    height: 18px;
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
}

.btn-outline-danger:hover {
    background: #dc3545;
    color: var(--color-white);
}

/* Actions cell in tables */
.actions-cell {
    white-space: nowrap;
    vertical-align: middle;
}

/* Hide button labels on smaller screens */
@media (max-width: 992px) {
    .btn-group-compact .btn-label {
        display: none;
    }

    .btn-group-compact .btn {
        padding: 0.5rem;
    }

    .btn-group-compact .btn svg {
        margin: 0;
    }
}

/* Contract table specific styles */
.table-contracts td {
    vertical-align: middle;
}

.table-contracts td:nth-child(2) {
    text-align: left;
}

.table-contracts .actions-cell {
    text-align: right;
    min-width: 280px;
}

.table-contracts .btn-group-compact {
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .table-contracts {
        font-size: 0.875rem;
    }

    .table-contracts th:nth-child(3),
    .table-contracts td:nth-child(3) {
        display: none;
    }

    .table-contracts .actions-cell {
        min-width: auto;
    }

    .btn-group-compact {
        flex-direction: column;
    }

    .btn-group-compact .btn-label {
        display: inline;
    }
}

/* ----------------------------------------------------------------------------
   CANCEL/KUENDIGUNG SECTION
   Styles for contract cancellation component selection
   ---------------------------------------------------------------------------- */

.cancel-section {
    margin: 1.5rem 0;
}

.cancel-group {
    background: var(--color-bs-gray-100);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.cancel-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary);
}

.cancel-group-title svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.cancel-group-title .btn-link {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 400;
}

.cancel-group-title .btn-link + .btn-link {
    margin-left: 0.5rem;
}

.cancel-group-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    margin-bottom: 0.25rem;
    border-bottom: 2px solid var(--color-bs-gray-300);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cancel-header-kk {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: flex-end;
}

.cancel-header-kk .btn-link {
    font-size: 0.6875rem;
    padding: 0.125rem 0.25rem;
}

.cancel-item--domain,
.cancel-item--kk-all {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cancel-item-spacer {
    flex: 1;
}

.cancel-item--domain .checkbox-label:first-child {
    flex: 1;
}

.checkbox-label--kk {
    min-width: 60px;
    justify-content: flex-end;
}

.cancel-item--disabled {
    opacity: 0.5;
}

.cancel-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-bs-gray-200);
}

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

.cancel-item--main {
    background: var(--color-white);
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 0.5rem;
}

.cancel-item-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cancel-item-id {
    font-size: 0.8125rem;
    color: var(--color-muted);
    font-family: var(--font-mono);
}

.cancel-item-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0 1.75rem;
    font-size: 0.8125rem;
}

.cancel-item-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.cancel-item--indent {
    margin-left: 1.75rem;
}

.cancel-item--indent .form-input {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-bs-gray-300);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
}

.cancel-item--indent .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

/* Badge styles */
.badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Checkbox styling for cancel section */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-label--disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.checkbox-input {
    position: static !important;
    width: 18px !important;
    height: 18px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin-top: 2px;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   UTILITY CLASSES
   Wichtige Utility-Klassen
   ---------------------------------------------------------------------------- */

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

.text-right {
    text-align: right;
}

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

.text-small {
    font-size: 0.75rem;
}

.text-normal {
    font-weight: 400;
}

.text-required {
    color: #d32f2f;
}

.mb-2 {
    margin-bottom: 2rem;
}

.grid-full {
    grid-column: 1 / -1;
}

.hidden {
    display: none !important;
}

/* ----------------------------------------------------------------------------
   INFO & ERROR BOXES
   ---------------------------------------------------------------------------- */

.info {
    background: #e7f3ff;
    border-left: 4px solid var(--color-primary);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    margin: 1rem 0;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.error {
    background: var(--color-error-bg);
    border-left: 4px solid var(--color-error);
    padding: 1rem 1.25rem;
    border-radius: 4px;
    margin: 1rem 0;
    color: var(--color-error);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.box {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1rem 0;
}

/* Simple hint box for inline messages */
.hint-box {
    margin: 20px 0;
    padding: 15px;
    background-color: var(--color-bs-gray-100);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--color-bs-gray-600);
    line-height: 1.6;
}

.hint-box--warning {
    background-color: #fff3cd;
    color: #856404;
}

/* Hidden state for JS toggles (alternative to .hidden/.d-none) */
.is-hidden {
    display: none;
}

/* Inline icon for text flow */
.icon-inline {
    display: inline;
    vertical-align: middle;
}

/* Inline form for horizontal layout */
.form-inline {
    display: inline;
}

/* SMS verification resend section */
.sms-resend-section {
    text-align: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-bs-gray-200);
    margin-top: 1rem;
}

/* SMS help text at bottom */
.sms-help-text {
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: 0 1.5rem 1rem;
}

/* Compact link button (no padding) */
.btn-link--compact {
    padding: 0;
    margin-left: 0.5rem;
}

/* ----------------------------------------------------------------------------
   ICON SYSTEM BASE
   ---------------------------------------------------------------------------- */

.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.icon svg {
    display: block;
}

/* ----------------------------------------------------------------------------
   TABLE PRICE (Legacy-Kompatibilität)
   ---------------------------------------------------------------------------- */

.TablePrice {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.TablePrice th,
.TablePrice td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-bs-gray-200);
}

.TablePrice th {
    background: var(--color-bs-gray-100);
    font-weight: 600;
    color: var(--color-secondary);
}

.TablePrice tr:hover {
    background: var(--color-bs-gray-100);
}

/* ----------------------------------------------------------------------------
   RESPONSIVE UPDATES
   ---------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .btn {
        width: 100%;
        justify-content: center;
    }
    
    .pricing-spec {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ----------------------------------------------------------------------------
   EXTERNAL LINK
   Für externe Links mit Icon
   ---------------------------------------------------------------------------- */

.external-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    text-decoration: none;
    font-size: 1rem;
    transition: color 150ms ease;
}

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

.external-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Fix für feature-item SVG Icons - alle Kontexte */
.feature-item > svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--color-success-alt);
}

.feature-item > span {
    flex: 1;
}

/* ----------------------------------------------------------------------------
   WARNING BOX
   Yellow/orange warning/notice box for important information
   ---------------------------------------------------------------------------- */

.warning-box {
    background: linear-gradient(135deg, var(--color-warning-bg) 0%, #ffeaa7 100%);
    padding: 2.5rem;
    border-radius: 16px;
    margin: 3rem 0;
    border: 2px solid var(--color-warning-alt);
}

.warning-box h2,
.warning-box h3 {
    color: #856404;
    font-size: 1.75rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.warning-box h2 svg,
.warning-box h3 svg {
    width: 28px;
    height: 28px;
    color: #f59f00;
    flex-shrink: 0;
}

.warning-box p {
    color: #856404;
    font-size: 1.0625rem;
    line-height: 1.7;
    margin: 0;
}

.warning-box a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
}

.warning-box a:hover {
    color: var(--color-primary-dark);
}

.warning-box .warning-list {
    color: #856404;
    font-size: 1rem;
    line-height: 1.8;
    margin: 1rem 0 0 0;
    padding-left: 1.5rem;
}

.warning-box .warning-list li {
    margin-bottom: 0.5rem;
}

.warning-box .warning-list li:last-child {
    margin-bottom: 0;
}

.warning-box .warning-list strong {
    color: #6c4f00;
}

/* ----------------------------------------------------------------------------
   TEAMSPEAK PRICING SECTION
   Special pricing display for TeamSpeak with slot ranges
   ---------------------------------------------------------------------------- */

.pricing-center {
    text-align: center;
    margin: 3rem 0;
}

.price-main {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 3rem;
    border-radius: 16px;
    margin-bottom: 3rem;
}

.price-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.price-large {
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 1rem;
}

.price-unit-large {
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.9;
}

.price-discount {
    font-size: 1.125rem;
    opacity: 0.95;
}

.slot-ranges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.slot-range-item {
    background: var(--color-bs-gray-100);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
}

.slot-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.slot-label {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin-bottom: 1rem;
}

.slot-desc {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.pricing-features {
    background: var(--color-bs-gray-100);
    padding: 2.5rem;
    border-radius: 12px;
    margin: 3rem 0;
}

.pricing-features h3 {
    color: var(--color-text-primary);
    margin-bottom: 2rem;
    text-align: center;
}

.pricing-features .feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.pricing-features .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.pricing-features .feature-item svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
}

.pricing-features .feature-item span {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

@media (max-width: 768px) {
    .price-large {
        font-size: 2.5rem;
    }
    
    .price-unit-large {
        font-size: 1rem;
    }
    
    .slot-ranges {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------------------------------
   TEAMSPEAK SPECIFIC COMPONENTS
   ---------------------------------------------------------------------------- */

/* Highlight Box - for hero section pricing highlight */
.highlight-box {
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
    text-align: center;
}

.highlight-box strong {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.highlight-box span {
    font-size: 1.0625rem;
    opacity: 0.95;
}

/* Section Header - centered section titles */
.section-header {
    text-align: center;
    margin: 3rem 0 2rem 0;
}

.section-header h2 {
    color: var(--color-primary);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.section-header p {
    color: var(--color-text-muted);
    font-size: 1.125rem;
    margin: 0;
}

.section-header + .details-section {
    margin-top: 0;
    padding-top: 0.5rem;
}

/* Server Address Box - for TeamSpeak server connection info */
.server-address {
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1.5rem;
    text-align: center;
}

.server-address a {
    font-family: 'Courier New', monospace;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-primary) !important;
    text-decoration: none;
}

.server-address a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .section-header h2 {
        font-size: 1.75rem;
    }

    .highlight-box strong {
        font-size: 1.5rem;
    }
}

/* ----------------------------------------------------------------------------
   ORDER PAGES
   ---------------------------------------------------------------------------- */

/* Order-specific styles - .order-container, .order-hero, .order-form-card defined in order.css */

.order-intro {
    background: var(--color-bs-gray-100);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    border-top: 4px solid var(--color-primary);
}

.order-intro strong {
    color: var(--color-primary);
}

.order-intro p {
    margin-bottom: 0;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--color-gray-350);
    background: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
}

.order-table td,
.order-table th {
    padding: 1rem 1.25rem;
    vertical-align: top;
    border-bottom: 1px solid var(--color-gray-200);
}

.order-table tr:last-child td {
    border-bottom: none;
}

.order-table-header {
    background: var(--color-bs-gray-100);
    font-weight: 600;
    color: var(--color-text);
}

.message-note {
    margin-top: 10px;
}

/* Cost Overview Specific Styles */
.cost-overview-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 1.25rem 2rem;
    display: grid;
    grid-template-columns: 1fr minmax(120px, 150px) minmax(120px, 150px);
    gap: 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.cost-overview-body {
    padding: 0;
}

.cost-item {
    display: grid;
    grid-template-columns: 1fr minmax(120px, 150px) minmax(120px, 150px);
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--color-bs-gray-200);
    transition: background 150ms ease;
}

.cost-item:hover {
    background: var(--color-bs-gray-100);
}

.cost-item:last-child {
    border-bottom: none;
}

.cost-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cost-item-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-primary);
}

.cost-item-description {
    font-size: 0.9375rem;
    color: var(--color-gray-700);
    line-height: 1.5;
}

.cost-item-note {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    background: #e7f3ff;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
}

.cost-item-note.free {
    background: var(--color-success-bg-alt);
    color: #155724;
}

/* Link to change addon/edition in cost overview */
.cost-item-link {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-primary);
    text-decoration: none;
}

.cost-item-link:hover {
    text-decoration: underline;
}

.cost-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 1rem;
    color: var(--color-secondary-dark);
    white-space: nowrap;
}

.cost-total {
    display: grid;
    grid-template-columns: 1fr minmax(120px, 150px) minmax(120px, 150px);
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: var(--color-bs-gray-100);
    border-top: 2px solid var(--color-primary);
    font-weight: 600;
    font-size: 1.125rem;
}

.cost-total-label {
    color: var(--color-secondary-dark);
}

.cost-total-price {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: var(--color-primary);
}

.cost-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    background: var(--color-white);
}

.cost-actions .btn-secondary {
    margin-right: auto;
}

.cost-actions-form {
    display: contents;
}

.alternative-option {
    margin-top: 0.75rem;
    padding: 0.875rem 1rem;
    background: #fff8e1;
    border-left: 4px solid var(--color-warning-alt);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-secondary-dark);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.alternative-option .alternative-text {
    flex: 1;
    min-width: 200px;
}

.alternative-option .btn {
    flex-shrink: 0;
}

.alternative-option a:not(.btn) {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.alternative-option a:not(.btn):hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .cost-overview-header,
    .cost-item,
    .cost-total {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .cost-price,
    .cost-total-price {
        justify-content: flex-start;
        margin-top: 0.5rem;
    }

    .cost-actions {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .cost-actions .btn-secondary {
        margin-right: 0;
    }

    .cost-actions .btn-secondary,
    .cost-actions .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* ----------------------------------------------------------------------------
   ORDER PROGRESS STEPPER
   Visual progress indicator for multi-step order process
   ---------------------------------------------------------------------------- */

.order-progress {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 2rem;
    padding: 0 1rem;
    counter-reset: step;
}

.order-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 180px;
}

.order-progress-step::before {
    counter-increment: step;
    content: counter(step);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-bs-gray-200);
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    position: relative;
    z-index: 2;
    transition: all 200ms ease;
    border: 3px solid var(--color-bs-gray-200);
}

.order-progress-step::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 3px;
    background: var(--color-bs-gray-200);
    z-index: 1;
}

.order-progress-step:last-child::after {
    display: none;
}

.order-progress-step.completed::before {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-white);
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}

.order-progress-step.completed::after {
    background: var(--color-success);
}

.order-progress-step.active::before {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 0 0 4px rgba(11, 101, 174, 0.2);
}

.order-progress-label {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-gray-600);
    text-align: center;
    line-height: 1.3;
}

.order-progress-step.completed .order-progress-label,
.order-progress-step.active .order-progress-label {
    color: var(--color-secondary-dark);
    font-weight: 600;
}

@media (max-width: 768px) {
    .order-progress {
        gap: 0;
        padding: 0 0.5rem;
        margin-bottom: 1.5rem;
    }

    .order-progress-step::before {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .order-progress-step::after {
        top: 16px;
        left: calc(50% + 16px);
        width: calc(100% - 32px);
        height: 2px;
    }

    .order-progress-step.completed::before {
        background-size: 14px;
    }

    .order-progress-label {
        font-size: 0.6875rem;
        margin-top: 0.5rem;
    }
}

@media (max-width: 480px) {
    .order-progress-label {
        display: none;
    }

    .order-progress-step::before {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .order-progress-step::after {
        top: 14px;
        left: calc(50% + 14px);
        width: calc(100% - 28px);
    }
}

/* ----------------------------------------------------------------------------
   STICKY MOBILE SUMMARY BAR
   Fixed bottom bar showing total price on mobile
   ---------------------------------------------------------------------------- */

.mobile-summary-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-bs-gray-200);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
    padding: 0.875rem 1rem;
    z-index: 100;
    transform: translateY(100%);
    transition: transform 300ms ease;
}

.mobile-summary-bar.visible {
    transform: translateY(0);
}

.mobile-summary-bar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
    gap: 1rem;
}

.mobile-summary-price {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.mobile-summary-price-label {
    font-size: 0.75rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.mobile-summary-price-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.mobile-summary-bar .btn {
    flex-shrink: 0;
    padding: 0.75rem 1.5rem;
}

@media (max-width: 768px) {
    .mobile-summary-bar {
        display: block;
    }

    /* Add bottom padding to page content to prevent overlap */
    .order-container {
        padding-bottom: 5rem;
    }
}

/* ----------------------------------------------------------------------------
   MOBILE PRICE LABELS
   Show price type labels on mobile when grid collapses
   ---------------------------------------------------------------------------- */

.cost-price-label {
    display: none;
    font-size: 0.75rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
    .cost-price-label {
        display: block;
    }

    .cost-price {
        flex-direction: column;
        align-items: flex-start;
    }

    .cost-total-price {
        flex-direction: column;
        align-items: flex-start;
    }

    .cost-total-label-mobile {
        display: block;
        font-size: 0.75rem;
        color: var(--color-gray-600);
        text-transform: uppercase;
        letter-spacing: 0.02em;
        margin-bottom: 0.25rem;
    }
}

@media (min-width: 769px) {
    .cost-total-label-mobile {
        display: none;
    }
}

/* ----------------------------------------------------------------------------
   RANGE SLIDER (Universal)
   ---------------------------------------------------------------------------- */

.slider-section {
    background: var(--color-white);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem 2rem 1.5rem 2rem;
    margin-bottom: 3rem;
    overflow: visible;
}

.slider-section h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary-dark);
    margin-bottom: 0.75rem;
}

.slider-section > p {
    color: var(--color-gray-700);
    margin-bottom: 1.5rem;
}

.slider-section form {
    margin: 0;
}

.slider-container {
    margin: 0;
    overflow: visible;
}

.slider-value {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.slider-wrapper {
    position: relative;
    padding: 0 1rem;
    overflow: visible;
    margin-bottom: 0;
}

.range-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(to right,
        var(--color-primary) 0%,
        var(--color-primary) var(--value, 0%),
        var(--color-bs-gray-200) var(--value, 0%),
        var(--color-bs-gray-200) 100%);
    outline: none;
    cursor: pointer;
    display: block;
    margin-bottom: 0;
}

.range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(11, 101, 174, 0.3);
    transition: all 200ms ease;
}

.range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.4);
}

.range-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    cursor: pointer;
    border: none;
    box-shadow: 0 2px 8px rgba(11, 101, 174, 0.3);
    transition: all 200ms ease;
}

.range-slider::-moz-range-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.4);
}

.slider-labels {
    position: relative;
    width: 100%;
    height: 22px;
    margin-top: 0.75rem;
    pointer-events: none;
}

.slider-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
}

/* ----------------------------------------------------------------------------
   CONTRACT/OPTION SELECTION
   ---------------------------------------------------------------------------- */

.contract-section {
    background: var(--color-white);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
}

.contract-header {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary-dark);
    margin-bottom: 1.5rem;
    text-align: center;
}

.contract-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contract-option {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--color-white);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    cursor: pointer;
    transition: all 200ms ease;
}

.contract-option:hover {
    border-color: var(--color-primary);
    background: var(--color-bs-gray-100);
}

.contract-option input[type="radio"]:checked + .contract-info,
.contract-option:has(input[type="radio"]:checked) {
    border-color: var(--color-primary);
    background: #f0f8ff;
}

.contract-radio {
    flex-shrink: 0;
}

.contract-radio input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.contract-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.contract-term {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-secondary-dark);
}

.contract-billing {
    font-size: 0.9375rem;
    color: var(--color-gray-700);
}

.contract-price-wrapper {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.contract-price-label {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contract-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--color-primary);
}

.submit-section {
    text-align: center;
    padding-top: 1rem;
}

.submit-section .btn {
    min-width: 250px;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .order-hero h1 {
        font-size: 2rem;
    }

    .order-hero h2 {
        font-size: 1.125rem;
    }

    .contract-option {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .contract-price-wrapper {
        align-items: flex-start;
        width: 100%;
    }

    .slider-label {
        font-size: 0.75rem;
    }
}

/* ============================================================================
   STEP-BASED SECTIONS (Inline Variant)
   For numbered step sections with inline step badges
   ============================================================================ */

.step-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

/* Variant for multi-line step content (e.g., in info-boxes) */
.step-header--top {
    align-items: flex-start;
}

.step-header--top .step-badge {
    margin-top: 0.125rem;
}

.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    border-radius: 50%;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(11, 101, 174, 0.25);
}

.step-header h3 {
    margin: 0;
    color: var(--color-text-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

/* ============================================================================
   CODE BLOCKS
   For displaying code snippets with copy functionality
   ============================================================================ */

.code-block-container {
    margin: 1.5rem 0;
}

.code-block-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 0.875rem 1.25rem;
    border-radius: 8px 8px 0 0;
    font-weight: 600;
    font-size: 0.9375rem;
}

.copy-button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
    padding: 0.375rem 0.875rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.copy-button:hover {
    background: rgba(255, 255, 255, 0.3);
}

.copy-button.copied {
    background: var(--color-success-alt);
    border-color: var(--color-success-alt);
}

.code-block {
    background: #2d2d2d;
    color: #f8f8f2;
    padding: 1.25rem;
    border-radius: 0 0 8px 8px;
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
    font-size: 0.875rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ============================================================================
   PREVIEW BANNER
   For displaying banner previews
   ============================================================================ */

.preview-banner {
    margin-top: 1rem;
    padding: 1.5rem;
    background: var(--color-bs-gray-100);
    border-radius: 8px;
    text-align: center;
}

.preview-banner img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   DIVIDER
   Horizontal dividing line with gradient
   ============================================================================ */

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-bs-gray-200) 20%, var(--color-bs-gray-200) 80%, transparent 100%);
    margin: 3rem 0;
}

/* ============================================================================
   DATA TABLES
   Styled tables for data presentation (commissions, pricing, specs, etc.)
   ============================================================================ */

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin-top: 2rem;
}

.data-table thead {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
}

.data-table thead th {
    padding: 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    background: transparent;
    color: inherit;
}

.data-table tbody tr {
    border-bottom: 1px solid var(--color-bs-gray-200);
}

.data-table tbody tr:last-child {
    border-bottom: none;
}

.data-table tbody tr.category td {
    background: linear-gradient(90deg, rgba(11, 101, 174, 0.1) 0%, rgba(11, 101, 174, 0.05) 100%);
    font-weight: 700;
    color: var(--color-primary);
    padding: 0.875rem 1rem;
    text-transform: uppercase;
    font-size: 0.8125rem;
    letter-spacing: 0.05em;
}

.data-table tbody tr:not(.category) td {
    padding: 0.875rem 1rem;
    color: var(--color-text-secondary);
}

.data-table tbody tr:not(.category):hover {
    background: var(--color-bs-gray-100);
}

.data-table tbody td:first-child {
    font-weight: 500;
}

.data-table tbody td:last-child {
    text-align: center;
    font-weight: 700;
    color: var(--color-primary);
}

.data-table tbody tr.highlight {
    background: linear-gradient(90deg, rgba(40, 167, 69, 0.08) 0%, rgba(40, 167, 69, 0.02) 100%);
    border-left: 3px solid var(--color-success);
}

.data-table tbody tr.highlight:hover {
    background: linear-gradient(90deg, rgba(40, 167, 69, 0.12) 0%, rgba(40, 167, 69, 0.05) 100%);
}

/* Price list table improvements - better column alignment */
.data-table thead th:first-child,
.data-table tbody td:first-child {
    text-align: left;
    width: 45%;
}

.data-table thead th:nth-child(2),
.data-table tbody td:nth-child(2),
.data-table thead th:nth-child(3),
.data-table tbody td:nth-child(3) {
    text-align: center;
    width: 12%;
    white-space: nowrap;
}

.data-table thead th:nth-child(4),
.data-table tbody td:nth-child(4),
.data-table thead th:nth-child(5),
.data-table tbody td:nth-child(5) {
    text-align: right;
    width: 12%;
    white-space: nowrap;
}

.data-table tbody td:last-child {
    text-align: right;
}

/* TLD Badge Grid - for displaying many TLD options */
.tld-badge-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.tld-badge {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    transition: all 150ms ease;
}

.tld-badge:hover {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
    color: var(--color-primary);
}

/* ============================================================================
   DISCLAIMER
   Small disclaimer text at bottom of sections
   ============================================================================ */

.disclaimer {
    margin-top: 2rem;
    padding: 1rem;
    background: var(--color-bs-gray-100);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* ============================================================================
   PRODUCT SWITCHER
   Tab-like switcher for product variants (VPS vs ECS, Linux vs Windows)
   ============================================================================ */

.product-switcher {
    margin: 2rem 0 3rem 0;
    text-align: center;
}

.product-switcher .ProductClassButtonActive,
.product-switcher .ProductClassButtonInactive {
    display: inline-block;
    margin: 0 0.5rem;
}

/* ============================================================================
   PARTNER LOGOS
   Logos for partners/third-party software
   ============================================================================ */

.partner-logo {
    max-width: 100%;
    height: auto;
    display: block;
}

.partner-logo--left {
    margin: 1rem 1rem 1rem 0;
    float: left;
}

.partner-logo--right {
    margin: 1rem 0 1rem 1rem;
    float: right;
}

/* ============================================================================
   PRODUCT COMPARISON TABLES
   Tables for comparing product packages with features and pricing
   ============================================================================ */

.product-table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 8px;
    overflow: hidden;
}

.product-table caption {
    caption-side: top;
    padding: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    text-align: left;
    color: var(--color-text-primary);
}

/* Table Header */
.product-table thead tr {
    background-color: var(--color-white);
}

.product-table thead th {
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
    border: 0;
}

.product-table thead th:first-child {
    width: 240px;
    min-width: 240px;
    border: 0;
}

.product-table thead th.headcat-single {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    font-weight: 600;
    font-size: 1rem;
}

.product-table thead th.head {
    width: 70px;
    min-width: 70px;
    font-weight: 600;
    color: var(--color-primary);
    background-color: var(--color-white);
}

/* Price Rows */
.product-table .RowPrice th {
    text-align: left;
    font-weight: 400;
    padding: 1.5rem 1rem;
    background: var(--color-bs-gray-100);
}

.product-table .RowPrice th b {
    display: block;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.product-table .RowPrice th small {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.product-table .RowPrice td {
    text-align: center;
    vertical-align: middle;
    padding: 1.5rem 0.5rem;
    background: var(--color-bs-gray-100);
}

/* Category Headers */
.product-table tbody th.cat {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    font-weight: 700;
    padding: 1rem;
    text-align: left;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
}

.product-table tbody th.cat img {
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Feature Rows */
.product-table tbody th[scope="row"] {
    text-align: left;
    padding: 0.875rem 1rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.product-table tbody td {
    text-align: center;
    padding: 0.875rem 0.5rem;
    color: var(--color-text-secondary);
}

.product-table tbody tr {
    border-bottom: 1px solid var(--color-bs-gray-200);
}

.product-table tbody tr:last-child {
    border-bottom: none;
}

.product-table tbody tr.border {
    border-bottom: 2px solid var(--color-primary);
}

.product-table tbody tr.alt {
    background: var(--color-bs-gray-100);
}

/* OS Toggling (Linux/Windows) */
.product-table .Linux {
    display: table-row;
}

.product-table .Windows {
    display: none;
}

.product-table.show-windows .Linux {
    display: none;
}

.product-table.show-windows .Windows {
    display: table-row;
}

/* Product Table Pricing */
.product-table .TablePrice {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 0.75rem;
}

/* OS Switcher Buttons in Table Header */
.product-table thead .ProductClassButtonActive,
.product-table thead .ProductClassButtonInactive {
    display: inline-block;
}

.product-table thead .ProductClassButtonActive span[style],
.product-table thead .ProductClassButtonInactive span[style] {
    background-repeat: no-repeat;
    padding-right: 20px;
    margin: 0;
    display: inline-block;
}

/* Responsive */
@media (max-width: 992px) {
    .product-table {
        font-size: 0.875rem;
    }

    .product-table thead th:first-child {
        min-width: 180px;
    }

    .product-table thead th.head {
        min-width: 60px;
    }

    .product-table .TablePrice {
        font-size: 1.25rem;
    }
}

/* ============================================================================
   TEXT UTILITIES
   Utility classes for text styling
   ============================================================================ */

.text-muted {
    color: var(--color-text-muted);
    font-weight: normal;
}

.text-bold {
    font-weight: 700;
}

.text-primary {
    color: var(--color-primary);
}

.text-secondary {
    color: var(--color-secondary);
}

/* Addon Configuration Styles (from order_addondaten.php) */
.addon-intro {
    background: var(--color-bs-gray-100);
    padding: 1.5rem;
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.addon-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 2rem;
}

.addon-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 1.25rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.addon-body {
    padding: 2rem;
}

.storage-tiers {
    display: grid;
    gap: 1.5rem;
}

.storage-tier {
    background: var(--color-bs-gray-100);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 150ms ease;
}

.storage-tier:hover {
    border-color: var(--color-primary);
    background: var(--color-white);
}

.storage-tier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.storage-tier-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.storage-tier-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-white);
}

.badge-t5 {
    background: var(--color-error);
}

.badge-t10 {
    background: #ea580c;
}

.badge-t15 {
    background: var(--color-primary);
}

.badge-t22 {
    background: #059669;
}

.storage-tier-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-secondary-dark);
}

.storage-tier-price {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-primary);
}

.storage-tier-description {
    color: var(--color-gray-700);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.storage-tier-specs {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.spec-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.spec-label {
    font-weight: 600;
    color: var(--color-secondary-dark);
}

.slider-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.slider-value-display {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
}

.slider-value-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.slider-value-cost {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-700);
}

.storage-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(to right, var(--color-primary) 0%, var(--color-primary) var(--value), var(--color-bs-gray-200) var(--value), var(--color-bs-gray-200) 100%);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
}

.storage-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    border: 3px solid var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 150ms ease;
}

.storage-slider::-webkit-slider-thumb:hover {
    background: var(--color-primary-dark);
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.4);
}

.storage-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    border: 3px solid var(--color-white);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 150ms ease;
}

.storage-slider::-moz-range-thumb:hover {
    background: var(--color-primary-dark);
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.4);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    color: var(--color-text-light);
}

.total-cost-section {
    background: var(--color-info-bg);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin: 2rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-cost-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-secondary-dark);
}

.total-cost-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
}

.no-addon-option {
    background: var(--color-bs-gray-100);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 150ms ease;
}

.no-addon-option:hover {
    border-color: var(--color-primary);
    background: var(--color-white);
}

.no-addon-option input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.no-addon-option label {
    font-weight: 600;
    color: var(--color-secondary-dark);
    cursor: pointer;
    margin: 0;
}

.addon-submit-section {
    border-top: 1px solid var(--color-bs-gray-200);
    padding: 1.5rem 0 0 0;
    text-align: right;
}

.addon-error {
    background: var(--color-error-bg);
    border: 2px solid var(--color-error-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-error);
    font-weight: 600;
}

@media (max-width: 768px) {
    .addon-body {
        padding: 1.5rem;
    }

    .storage-tier-specs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .total-cost-section {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
}

/* Form Help Box (from order_bemerkungen.php) */
.form-help-box {
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border: 1px solid var(--color-info-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.form-help-box p {
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0;
    font-size: 0.9375rem;
}

/* Optional label indicator - subtle styling for non-required fields */
.label-optional {
    font-weight: 400;
    color: var(--color-text-muted, #6c757d);
    font-size: 0.875em;
}

.exchange-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 2rem;
}

.exchange-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 1.5rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.exchange-body {
    padding: 2rem;
}

.exchange-selector {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.exchange-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary-dark);
}

.exchange-select-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 0.5rem;
}

.quantity-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms ease;
    user-select: none;
}

.quantity-btn:hover {
    background: var(--color-primary-dark);
    transform: scale(1.05);
}

.quantity-btn:active {
    transform: scale(0.95);
}

.quantity-btn:disabled {
    background: var(--color-bs-gray-200);
    color: var(--color-text-light);
    cursor: not-allowed;
    transform: none;
}

.quantity-display {
    min-width: 60px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    user-select: none;
}

.quantity-input {
    display: none;
}

.exchange-price {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
}

.exchange-info {
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-primary);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
    line-height: 1.6;
    color: var(--color-secondary-dark);
}

.exchange-actions {
    border-top: 1px solid var(--color-bs-gray-200);
    padding: 1.5rem 0 0 0;
    margin-top: 2rem;
    text-align: right;
}

.exchange-error {
    background: var(--color-error-bg);
    border: 2px solid var(--color-error-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-error);
    font-weight: 600;
}

@media (max-width: 768px) {
    .exchange-body {
        padding: 1.5rem;
    }

    .exchange-select-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }

    .exchange-select {
        width: 100%;
    }
}

.m365-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 2rem;
}

.m365-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 1.5rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.m365-body {
    padding: 2rem;
}

.m365-selector {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.m365-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary-dark);
}

.m365-select-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 0.5rem;
}

.quantity-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 150ms ease;
    user-select: none;
}

.quantity-btn:hover {
    background: var(--color-primary-dark);
    transform: scale(1.05);
}

.quantity-btn:active {
    transform: scale(0.95);
}

.quantity-btn:disabled {
    background: var(--color-bs-gray-200);
    color: var(--color-text-light);
    cursor: not-allowed;
    transform: none;
}

.quantity-display {
    min-width: 60px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    user-select: none;
}

.quantity-input {
    display: none;
}

.m365-price {
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
}

.m365-info {
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-primary);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
    line-height: 1.6;
    color: var(--color-secondary-dark);
}

.m365-actions {
    border-top: 1px solid var(--color-bs-gray-200);
    padding: 1.5rem 0 0 0;
    margin-top: 2rem;
    text-align: right;
}

.m365-error {
    background: var(--color-error-bg);
    border: 2px solid var(--color-error-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-error);
    font-weight: 600;
}

@media (max-width: 768px) {
    .m365-body {
        padding: 1.5rem;
    }

    .m365-select-wrapper {
        flex-direction: column;
        align-items: flex-start;
    }
}

.plesk-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 2rem;
}

.plesk-header-content {
    flex: 1;
}

.plesk-logo {
    width: 180px;
    flex-shrink: 0;
}

.plesk-intro {
    background: var(--color-bs-gray-100);
    padding: 1.5rem;
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.plesk-intro a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.plesk-intro a:hover {
    text-decoration: underline;
}

.plesk-selection-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 2rem;
}

.plesk-selection-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 1.25rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.plesk-selection-body {
    padding: 2rem;
}

.plesk-options {
    display: grid;
    gap: 1rem;
    margin-bottom: 2rem;
}

.plesk-option {
    display: grid !important;
    grid-template-columns: 40px 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 8px;
    transition: all 150ms ease;
    cursor: pointer;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.plesk-option:hover {
    border-color: var(--color-primary);
    background: var(--color-bs-gray-100);
}

.plesk-option.recommended {
    border-color: var(--color-primary);
    background: var(--color-info-bg);
}

.plesk-option input[type="radio"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary);
    margin: 0;
}

.plesk-option-content {
    display: block;
    line-height: 1.5;
}

.plesk-option-name {
    font-weight: 600;
    color: var(--color-secondary-dark);
    font-size: 1rem;
    line-height: 1.4;
}

.plesk-option-details {
    color: var(--color-gray-700);
    font-size: 0.875rem;
    margin-top: 0.25rem;
    line-height: 1.4;
}

.plesk-option-badge {
    display: inline-block;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.25rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.5rem;
}

.plesk-option-price {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: right;
    white-space: nowrap;
}

.plesk-option-price.no-price {
    color: var(--color-success-alt);
}

.plesk-submit-section {
    border-top: 1px solid var(--color-bs-gray-200);
    padding: 1.5rem 0 0 0;
    text-align: right;
}

.plesk-error {
    background: var(--color-error-bg);
    border: 2px solid var(--color-error-border);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    color: var(--color-error);
    font-weight: 600;
}

.plesk-comparison {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    overflow: hidden;
    margin-bottom: 2rem;
}

.plesk-comparison-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 1.25rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.feature-yes {
    color: var(--color-success-alt);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feature-yes svg {
    width: 20px;
    height: 20px;
}

.feature-no {
    color: var(--color-error);
}

@media (max-width: 768px) {
    .plesk-header {
        flex-direction: column-reverse;
    }

    .plesk-logo {
        align-self: center;
    }

    .plesk-option {
        grid-template-columns: 40px 1fr;
    }

    .plesk-option-price {
        grid-column: 2;
        text-align: left;
        margin-top: 0.5rem;
    }
}

.referer-layer {
    display: none;
    animation: fadeIn 300ms ease-in-out;
}

.referer-layer.visible {
    display: block;
}

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

.ssl-notice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
    border: 1px solid #a5d6a7;
    border-left: 4px solid #4caf50;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    color: #2e7d32;
    font-size: 0.9375rem;
}

.ssl-notice svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #4caf50;
}

.payment-info-box {
    background: var(--color-bs-gray-100);
    border: 1px solid var(--color-gray-350);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

.payment-info-title {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.75rem;
    font-size: 0.9375rem;
}

.payment-info-content {
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.payment-info-content strong {
    color: var(--color-primary);
}

.payment-rhythm-display {
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border: 1px solid var(--color-info-border);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    text-align: center;
}

.payment-rhythm-label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.payment-rhythm-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Order summary card content padding */
.order-form-card .summary-card-header ~ .summary-row,
.order-form-card .summary-card-header ~ .domain-notice {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

.order-form-card .summary-row:last-of-type {
    margin-bottom: 1.5rem;
}

.summary-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #094d85 100%);
    padding: 1rem 1.5rem;
    margin: 0;
}

.summary-card-title,
.order-form-card .summary-card-header h3.summary-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.summary-card-edit {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 150ms ease;
}

.summary-card-edit:hover {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

/* Optional badge for summary cards */
.summary-card-optional {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.8125rem;
    font-weight: 500;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    text-transform: lowercase;
}

/* Remarks content area with proper spacing */
.summary-remarks-content {
    padding: 1.5rem;
}

.summary-remarks-content textarea {
    width: 100%;
    min-height: 100px;
    padding: 0.875rem 1rem;
    border: 1px solid #dde3e9;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.summary-remarks-content textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

.summary-remarks-content textarea::placeholder {
    color: #9ca3af;
}

.summary-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid #f1f3f5;
}

.summary-row:last-child {
    border-bottom: none;
}

.summary-label {
    font-weight: 600;
    color: var(--color-text-secondary);
}

.summary-value {
    color: var(--color-text-primary);
}

.checkbox-section {
    background: var(--color-bs-gray-100);
    border: 1px solid var(--color-gray-350);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 1.5rem;
    line-height: 1.6;
    overflow: hidden;
}

.checkbox-section label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    padding: 1.25rem 1.5rem;
    margin: 0;
    transition: background-color 150ms ease;
}

.checkbox-section label:hover {
    background-color: rgba(11, 101, 174, 0.05);
}

.checkbox-section input[type="checkbox"] {
    margin-top: 0.25rem;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.domain-notice {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 1px solid #ffb74d;
    border-left: 4px solid #f57c00;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    color: #e65100;
    line-height: 1.6;
}

.domain-list {
    margin: 0.5rem 0;
    line-height: 1.8;
}

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

    .summary-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ----------------------------------------------------------------------------
   AUTH PAGES (Login, Password Reset, etc.)
   ---------------------------------------------------------------------------- */

.auth-container {
    max-width: 480px;
    margin: 0 auto;
    padding: 2rem 0;
}

.auth-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: 2rem;
}

.auth-intro {
    margin-bottom: 1.5rem;
    color: var(--color-gray-700);
    line-height: 1.6;
}

.auth-intro p {
    margin: 0;
}

.auth-form .form-group {
    margin-bottom: 1.25rem;
}

.auth-form .form-group label {
    display: block;
    font-weight: 600;
    color: var(--color-secondary-dark);
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.auth-form .form-input {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-gray-350);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.auth-form .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

.auth-form .form-hint {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

.auth-form .form-actions {
    margin-top: 1.5rem;
}

.auth-form .btn-block {
    width: 100%;
    padding: 1rem;
    font-size: 1rem;
}

.auth-links {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-bs-gray-200);
    text-align: center;
}

.auth-links a {
    color: var(--color-primary);
    text-decoration: none;
}

.auth-links a:hover {
    text-decoration: underline;
}

.auth-help {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-bs-gray-100);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.auth-help p {
    margin: 0 0 0.5rem 0;
}

.auth-help ul {
    margin: 0;
    padding-left: 1.25rem;
}

.auth-help li {
    margin-bottom: 0.25rem;
}

.auth-help a {
    color: var(--color-primary);
    font-weight: 600;
}

.auth-success {
    text-align: center;
    padding: 1rem 0;
}

.auth-success-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: var(--color-success-bg-alt);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-success-icon svg {
    width: 32px;
    height: 32px;
    stroke: #155724;
}

.auth-success h2 {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    color: var(--color-secondary-dark);
}

.auth-success p {
    margin: 0 0 0.5rem 0;
    color: var(--color-gray-700);
    line-height: 1.6;
}

.auth-success .auth-actions {
    margin-top: 2rem;
}

@media (max-width: 576px) {
    .auth-container {
        padding: 1rem;
    }

    .auth-card {
        padding: 1.5rem;
    }
}

/* ----------------------------------------------------------------------------
   ENTERPRISE / GROSSKUNDEN PAGE
   ---------------------------------------------------------------------------- */

.enterprise-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 3rem 2rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    text-align: center;
}

.enterprise-hero h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.enterprise-hero .subtitle,
.enterprise-hero h2 {
    font-size: 1.25rem;
    opacity: 0.95;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto 2rem auto;
    color: inherit;
}

.enterprise-hero .cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.enterprise-hero .cta-primary {
    background: var(--color-white);
    color: var(--color-primary) !important;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.2;
    transition: all 150ms ease;
}

.enterprise-hero .cta-primary:hover {
    background: var(--color-info-bg);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.enterprise-hero .cta-primary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.enterprise-hero .cta-secondary {
    background: transparent;
    color: var(--color-white) !important;
    border: 2px solid var(--color-white);
    padding: 1rem 2rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.2;
    transition: all 150ms ease;
}

.enterprise-hero .cta-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
}

.enterprise-hero .cta-secondary svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.section-heading {
    text-align: center;
    color: var(--color-primary);
    margin: 3rem 0 2rem 0;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.benefit-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    transition: all 150ms ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.benefit-card:hover {
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.15);
    border-color: var(--color-primary);
}

.benefit-card-icon {
    width: 48px;
    height: 48px;
    background: #f0f7ff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--color-primary);
}

.benefit-card-icon svg {
    width: 24px;
    height: 24px;
}

.benefit-card h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.benefit-card p {
    color: var(--color-gray-700);
    line-height: 1.6;
    margin: 0;
}

.services-section {
    background: var(--color-bs-gray-100);
    border-radius: 12px;
    padding: 3rem 2rem;
    margin: 3rem 0;
}

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

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.service-item {
    background: var(--color-white);
    border-radius: 8px;
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    transition: all 150ms ease;
}

.service-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.1);
}

.service-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
}

.service-icon svg {
    width: 20px;
    height: 20px;
}

.service-content h4 {
    color: var(--color-secondary-dark);
    margin: 0 0 0.5rem 0;
    font-size: 1.1rem;
}

.service-content p {
    color: var(--color-gray-700);
    margin: 0;
    line-height: 1.5;
    font-size: 0.95rem;
}

.trust-section {
    background: linear-gradient(135deg, var(--color-info-bg) 0%, #e8f3ff 100%);
    padding: 2rem;
    border-radius: 12px;
    margin: 3rem 0;
    text-align: center;
}

.trust-section h3 {
    color: var(--color-primary);
    margin-bottom: 1rem;
}

.trust-section p {
    color: var(--color-gray-700);
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

.use-cases-section {
    margin: 3rem 0;
}

.use-cases-section h2 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 2rem;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.use-case-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: all 150ms ease;
}

.use-case-card:hover {
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.15);
    border-color: var(--color-primary);
}

.use-case-badge {
    display: inline-block;
    background: #f0f7ff;
    color: var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: 16px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.use-case-card h4 {
    color: var(--color-primary);
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.use-case-card p {
    color: var(--color-gray-700);
    line-height: 1.6;
    margin: 0;
}

.cta-final {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 3rem 2rem;
    border-radius: 12px;
    text-align: center;
    margin: 3rem 0;
}

.cta-final h3 {
    color: var(--color-white);
    margin-bottom: 1rem;
    font-size: 2rem;
}

.cta-final p {
    color: var(--color-white);
    opacity: 0.95;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.cta-final .button-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-final .btn-white {
    background: var(--color-white);
    color: var(--color-primary) !important;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    transition: all 150ms ease;
}

.cta-final .btn-white:hover {
    background: var(--color-info-bg);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3);
}

.cta-final .btn-outline {
    background: transparent;
    color: var(--color-white) !important;
    border: 2px solid var(--color-white);
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    line-height: 1.2;
    transition: all 150ms ease;
}

.cta-final .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.cta-final .btn-outline svg,
.cta-final .btn-white svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .enterprise-hero h1 {
        font-size: 1.75rem;
    }

    .enterprise-hero .subtitle,
    .enterprise-hero h2 {
        font-size: 1rem;
    }

    .benefits-grid,
    .services-grid,
    .use-cases-grid {
        grid-template-columns: 1fr;
    }

    .services-section {
        padding: 2rem 1.5rem;
    }
}

/* ============================================================================
   LICENSE PARTNERS SECTION
   ============================================================================ */

.license-partners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0 3rem 0;
}

.license-partner-card {
    background: var(--color-white);
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.license-partner-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.license-partner-logo {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.license-partner-logo img {
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.license-partner-card h3 {
    font-size: 1.5rem;
    color: var(--color-primary);
    margin: 0 0 0.75rem 0;
}

.partner-badge {
    display: inline-block;
    padding: 4px 12px;
    background-color: var(--color-gray-150);
    color: var(--color-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.license-partner-card p {
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #555;
    margin-top: 1rem;
}

.section-intro {
    text-align: center;
    font-size: 1.1rem;
    color: var(--color-gray-700);
    margin: -0.5rem 0 2rem 0;
}

/* Left-align section-intro when it follows h1 directly (customer area pages) */
h1 + .section-intro {
    text-align: left;
}

@media (max-width: 768px) {
    .license-partners {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .license-partner-card {
        padding: 1.5rem;
    }
}

/* ============================================================================
   CONTACT PAGE STYLES  
   ============================================================================ */

.contact-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 3rem 2rem;
    border-radius: 12px;
    margin-bottom: 3rem;
    text-align: center;
}

.contact-hero h1 {
    color: var(--color-white);
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.contact-hero .subtitle,
.contact-hero h2 {
    font-size: 1.25rem;
    opacity: 0.95;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    color: inherit;
}

.quick-contact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
    align-items: stretch;
}

.quick-contact-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 150ms ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}

.quick-contact-card .btn {
    margin-top: auto;
    align-self: center;
}

.quick-contact-card:hover {
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.15);
    border-color: var(--color-primary);
}

.quick-contact-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem auto;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quick-contact-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-white);
}

.quick-contact-card h3 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.quick-contact-card .phone-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary-dark);
    margin: 1rem 0;
}

/* Contact Cards - Ansprechpartner */
.contact-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: box-shadow 150ms ease;
}

.contact-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.contact-card-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.25rem 0;
}

.contact-card-position {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem 0;
}

.contact-card-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.contact-detail {
    font-size: 0.9375rem;
    color: var(--color-text);
    padding: 0.25rem 0;
}

.contact-detail-label {
    font-weight: 500;
    color: var(--color-text-muted);
    display: inline-block;
    min-width: 80px;
}

.contact-card-permissions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border-light);
}

.permission-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8125rem;
    font-weight: 500;
    background: var(--color-gray-100);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
}

.permission-badge--active {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success-dark, #166534);
    border-color: var(--color-success, #22c55e);
}

@media (max-width: 640px) {
    .contact-card-details {
        grid-template-columns: 1fr;
    }

    .contact-detail-label {
        display: block;
        min-width: auto;
        margin-bottom: 0.125rem;
    }
}

.btn.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white) !important;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    border: none;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    font-family: inherit;
    margin-top: 1rem;
    transition: all 150ms ease;
    line-height: 1.2;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.25);
}

.btn.btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
    transform: translate(-50%, -50%);
    transition: width 400ms ease, height 400ms ease;
}

.btn.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.35);
}

.btn.btn-primary:hover::before {
    width: 500px;
    height: 500px;
}

/* Form Section & Actions */
.form-section {
    margin: 3rem 0;
}

.form-section h2 {
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.form-section h3 {
    font-weight: 400;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* Form Fieldsets */
.form-fieldset {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--color-white);
}

.form-fieldset-legend {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    padding: 0 0.5rem;
    margin-left: -0.5rem;
}

.form-fieldset-hint {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: -0.5rem 0 1rem 0;
}

/* Form Grids */
.form-grid {
    display: grid;
    gap: 1rem;
}

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

.form-grid--plz-ort {
    grid-template-columns: 120px 1fr;
}

@media (max-width: 640px) {
    .form-grid--2 {
        grid-template-columns: 1fr;
    }

    .form-grid--plz-ort {
        grid-template-columns: 100px 1fr;
    }

    .form-fieldset {
        padding: 1rem;
    }
}

/* Form Hints */
.form-hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* Form Static Value */
.form-static {
    margin: 0;
    padding: 0.5rem 0;
    color: var(--color-text);
    font-size: 1rem;
}

/* Stammdaten Form */
.stammdaten-form .form-group {
    margin-bottom: 1rem;
}

.stammdaten-form .form-grid .form-group {
    margin-bottom: 0;
}

.stammdaten-form .form-actions {
    margin-top: 2rem;
}

.stammdaten-form .form-hint {
    margin: 0.5rem 0 0 0;
}

/* Password Form */
.password-form .form-fieldset {
    max-width: 480px;
}

.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper .form-input {
    padding-right: 3rem;
}

.password-toggle {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}

.password-toggle:hover {
    color: var(--color-primary);
}

.password-toggle svg {
    width: 20px;
    height: 20px;
}

/* Password Requirements */
.password-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.requirement {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--color-gray-100);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    transition: all 150ms ease;
}

.requirement::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-text-muted);
    margin-right: 0.375rem;
    transition: background 150ms ease;
}

.requirement--valid {
    background: var(--color-success-light, #dcfce7);
    color: var(--color-success-dark, #166534);
    border-color: var(--color-success, #22c55e);
}

.requirement--valid::before {
    background: var(--color-success, #22c55e);
}

/* Form Hint States */
.form-hint--success {
    color: var(--color-success, #22c55e);
}

.form-hint--error {
    color: var(--color-error, #dc2626);
}

.form-footer {
    margin-top: 2rem;
}

.form-actions {
    margin-top: 1.5rem;
    text-align: center;
}

.form-actions .btn.btn-primary {
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    border: none !important;
}

/* Contact Form - UX Optimized */
.contact-form-section {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 16px;
    padding: 2.5rem;
    margin: 3rem 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.contact-form-header {
    text-align: center;
    margin-bottom: 2rem;
}

.contact-form-header h2 {
    color: var(--color-primary);
    margin: 0 0 0.75rem 0;
    font-size: 1.75rem;
}

.contact-form-header p {
    color: var(--color-text-muted);
    margin: 0;
    font-size: 1.05rem;
}

.contact-form-header p a {
    color: var(--color-primary);
}

/* Honeypot - visually hidden but accessible to bots */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

.contact-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
}

.contact-form-field-full {
    grid-column: 1 / -1;
}

.contact-form-field label {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.contact-form-field .required-mark {
    color: #dc3545;
    font-weight: 400;
}

.contact-form-field input,
.contact-form-field select,
.contact-form-field textarea {
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-bs-gray-300);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--color-text-primary);
    background: var(--color-white);
    transition: border-color 150ms ease, box-shadow 150ms ease;
    width: 100%;
    box-sizing: border-box;
}

.contact-form-field input:focus,
.contact-form-field select:focus,
.contact-form-field textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(11, 101, 174, 0.1);
}

.contact-form-field input:hover:not(:focus),
.contact-form-field select:hover:not(:focus),
.contact-form-field textarea:hover:not(:focus) {
    border-color: var(--color-bs-gray-400);
}

.contact-form-field input::placeholder,
.contact-form-field textarea::placeholder {
    color: var(--color-bs-gray-500);
}

.contact-form-field input[readonly] {
    background: var(--color-bs-gray-100);
    cursor: not-allowed;
}

.contact-form-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 2.5rem;
}

.contact-form-field input[type="file"] {
    padding: 0.75rem 1rem;
    cursor: pointer;
    background: var(--color-bs-gray-50);
}

.contact-form-field input[type="file"]::file-selector-button {
    padding: 0.5rem 1rem;
    margin-right: 1rem;
    border: 1px solid var(--color-bs-gray-300);
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-text-primary);
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
}

.contact-form-field input[type="file"]::file-selector-button:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.contact-form-field label .label-icon {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 0.25rem;
    opacity: 0.6;
}

.contact-form-field textarea {
    resize: vertical;
    min-height: 140px;
}

.field-hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.375rem;
}

.field-hint-right {
    text-align: right;
}

.contact-form-footer {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.contact-form-footer .privacy-notice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: center;
    width: 100%;
    justify-content: center;
}

.contact-form-footer .privacy-notice svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-bs-gray-500);
}

.contact-form-footer .privacy-notice a {
    color: var(--color-primary);
}

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 150ms ease;
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.3);
}

.contact-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(11, 101, 174, 0.4);
}

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

.contact-submit-btn svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .contact-form-section {
        padding: 1.5rem;
        margin: 2rem 0;
    }

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

    .contact-form-header h2 {
        font-size: 1.5rem;
    }

    .contact-submit-btn {
        width: 100%;
    }
}

/* Contact Form Error States */
.contact-form-field.has-error input,
.contact-form-field.has-error select,
.contact-form-field.has-error textarea {
    border-color: #dc3545;
    background-color: #fff8f8;
}

.contact-form-field.has-error input:focus,
.contact-form-field.has-error select:focus,
.contact-form-field.has-error textarea:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

/* General Form Error States */
.form-error {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    color: #721c24;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.9375rem;
}

.form-group.has-error .form-input,
.input-error {
    border-color: #dc3545;
    background-color: #fff8f8;
}

.form-group.has-error .form-input:focus,
.input-error:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.field-error {
    display: block;
    color: #dc3545;
    font-size: 0.8125rem;
    margin-top: 0.375rem;
    padding-left: 0.125rem;
}

/* Form Error Summary Box */
.form-error-summary {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, #fff5f5 0%, #fff0f0 100%);
    border: 1px solid #f5c2c7;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    border-left: 4px solid #dc3545;
}

.form-error-summary .error-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #dc3545;
}

.form-error-summary .error-icon svg {
    width: 100%;
    height: 100%;
}

.form-error-summary .error-content {
    flex: 1;
}

.form-error-summary .error-content strong {
    display: block;
    color: #842029;
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
}

.form-error-summary .error-content ul {
    margin: 0;
    padding-left: 1.25rem;
    color: #842029;
    font-size: 0.875rem;
}

.form-error-summary .error-content ul li {
    margin-bottom: 0.25rem;
}

.form-error-summary .error-content ul li:last-child {
    margin-bottom: 0;
}

/* Contact Success Page */
.contact-success-page {
    text-align: center;
    padding: 3rem 2rem;
    max-width: 600px;
    margin: 0 auto;
}

.contact-success-page .success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    color: #198754;
    background: linear-gradient(135deg, #d1e7dd 0%, #c3e6cb 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-success-page .success-icon svg {
    width: 48px;
    height: 48px;
}

/* Warning/info variant (already activated) */
.contact-success-page .success-icon--warning {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%);
    color: #856404;
}

/* Error variant (activation failed) */
.contact-success-page .success-icon--error {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #dc3545;
}

.contact-success-page h1.warning-title {
    color: #856404;
}

.contact-success-page h1.error-title {
    color: #dc3545;
}

.contact-success-page h1 {
    color: #198754;
    font-size: 1.75rem;
    margin: 0 0 0.75rem 0;
}

.contact-success-page .success-subtitle {
    color: var(--color-text-muted);
    font-size: 1.1rem;
    margin: 0 0 2rem 0;
}

.contact-success-page .success-details {
    background: var(--color-bs-gray-100);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    text-align: left;
}

.contact-success-page .success-details p {
    margin: 0.5rem 0;
    color: var(--color-secondary-dark);
    font-size: 0.9375rem;
}

.contact-success-page .success-details p:first-child {
    margin-top: 0;
}

.contact-success-page .success-details p:last-child {
    margin-bottom: 0;
}

/* Info boxes within success page should be left-aligned */
.contact-success-page .info-box {
    text-align: left;
}

.contact-success-page .info-box .step-header {
    justify-content: flex-start;
}

.contact-success-page .success-actions {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 1rem;
    flex-wrap: wrap;
}

.contact-success-page .success-actions .btn {
    min-width: 200px;
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
    height: 52px;
    box-sizing: border-box;
    margin: 0;
    vertical-align: middle;
    line-height: 1.2;
    border-width: 2px;
}

@media (max-width: 480px) {
    .contact-success-page {
        padding: 2rem 1rem;
    }

    .contact-success-page .success-icon {
        width: 64px;
        height: 64px;
    }

    .contact-success-page .success-icon svg {
        width: 36px;
        height: 36px;
    }

    .contact-success-page h1 {
        font-size: 1.5rem;
    }

    .contact-success-page .success-actions {
        flex-direction: column;
    }

    .contact-success-page .success-actions .btn {
        width: 100%;
    }
}

.office-hours-simple {
    text-align: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f3ff 100%);
    border-radius: 8px;
    margin: 3rem 0;
    border: 1px solid var(--color-primary)20;
}

.office-hours-simple h3 {
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
    font-size: 1.3rem;
}

.office-hours-simple p {
    margin: 0.25rem 0;
    color: var(--color-secondary-dark);
    font-size: 1.1rem;
}

.office-hours-simple .phone-main {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 1rem 0 0.5rem 0;
}

.office-hours-simple small {
    color: var(--color-gray-700);
    font-size: 0.95rem;
}

@media (max-width: 768px) {
    .contact-hero h1 {
        font-size: 1.75rem;
    }
    
    .contact-hero .subtitle,
    .contact-hero h2 {
        font-size: 1rem;
    }
    
    .quick-contact {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   COMPANY PAGE (UNTERNEHMEN)
   ============================================================================ */

.company-hero {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(11, 101, 174, 0.08) 0%, rgba(11, 101, 174, 0.02) 100%);
    border-radius: 16px;
    margin-bottom: 3rem;
}

.company-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.company-hero h2 {
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0;
}

.company-section {
    margin-bottom: 3rem;
}

.company-section h3 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--color-primary);
}

.company-profile {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.company-logo {
    flex-shrink: 0;
}

.company-logo img {
    width: 100px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.company-text {
    flex: 1;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

.company-text p {
    margin-bottom: 1rem;
}

.vision-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
    counter-reset: vision-counter;
}

.vision-item {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1.25rem 3.5rem;
    position: relative;
    counter-increment: vision-counter;
    display: flex;
    align-items: center;
    min-height: 60px;
}

.vision-item::before {
    content: counter(vision-counter);
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    transition: all 150ms ease;
}

.vision-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.15);
    border-color: var(--color-primary);
}

.vision-item:hover::before {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 2px 8px rgba(11, 101, 174, 0.3);
}

.vision-tagline {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border: 1px solid var(--color-info-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    text-align: center;
    font-size: 1.125rem;
    color: var(--color-text-secondary);
}

.vision-tagline strong {
    color: var(--color-primary);
}

.timeline {
    position: relative;
    padding: 2rem 0;
    max-width: 900px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-info-border) 100%);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: center;
}

.timeline-item:nth-child(odd) {
    grid-template-areas: "content marker year";
}

.timeline-item:nth-child(even) {
    grid-template-areas: "year marker content";
}

.timeline-marker {
    grid-area: marker;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border: 3px solid var(--color-white);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--color-info-bg);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-marker {
    transform: scale(1.3);
    box-shadow: 0 0 0 6px var(--color-info-bg-light), 0 0 20px rgba(11, 101, 174, 0.3);
}

.timeline-year {
    grid-area: year;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-year {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.2);
}

.timeline-content {
    grid-area: content;
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.timeline-item:hover .timeline-content {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11, 101, 174, 0.15);
    border-color: var(--color-primary)40;
}

.timeline-content a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s ease;
}

.timeline-content a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .company-profile {
        flex-direction: column;
    }

    .company-logo {
        text-align: center;
    }

    .vision-list {
        grid-template-columns: 1fr;
    }

    .timeline {
        padding: 1rem 0 1rem 2rem;
    }

    .timeline::before {
        left: calc(2rem + 5px);
        transform: none;
    }

    .timeline-item {
        grid-template-columns: auto 1fr !important;
        grid-template-areas: "marker content" "marker year" !important;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .timeline-marker {
        width: 12px;
        height: 12px;
        align-self: start;
        margin-top: 0.5rem;
    }

    .timeline-year {
        font-size: 1rem;
        padding: 0.5rem 1rem;
        text-align: left;
        justify-self: start;
    }

    .timeline-content {
        padding: 1rem;
    }
}

/* Company Stats */
.company-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
    padding: 1.5rem 0;
}

.stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: var(--color-gray-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================================
   TESTIMONIALS PAGE (KUNDENSTIMMEN)
   ============================================================================ */

.testimonials-hero {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(11, 101, 174, 0.08) 0%, rgba(11, 101, 174, 0.02) 100%);
    border-radius: 16px;
    margin-bottom: 3rem;
}

.testimonials-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.testimonials-hero h2 {
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin: 0 0 1rem 0;
}

.testimonials-intro {
    font-size: 1.0625rem;
    color: var(--color-text-secondary);
    line-height: 1.7;
    max-width: 700px;
    margin: 0 auto;
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.testimonial-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    padding: 2rem;
    transition: all 150ms ease;
    position: relative;
}

.testimonial-card:hover {
    box-shadow: 0 4px 16px rgba(11, 101, 174, 0.15);
}

.testimonial-quote-icon {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.testimonial-text {
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: 0.9375rem;
    font-style: italic;
    margin: 0 0 1.5rem 0;
    padding-right: 3rem;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 2px solid var(--color-info-bg);
}

.testimonial-avatar {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.testimonial-name {
    font-weight: 700;
    color: var(--color-text-primary);
    font-size: 0.9375rem;
}

.testimonial-rating {
    color: #fbbf24;
    font-size: 1rem;
    margin-top: 0.25rem;
}

.ekomi-section {
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border: 1px solid var(--color-info-border);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    padding: 2rem;
    margin: 3rem 0;
    text-align: center;
}

.ekomi-section h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.ekomi-section p {
    color: var(--color-text-secondary);
    margin-bottom: 1.5rem;
}

#eKomiWidget_default {
    margin-top: 1.5rem;
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .testimonials-hero h1 {
        font-size: 2rem;
    }
}

/* Ensure SVG logos are visible */
.license-partner-logo img[src$=".svg"] {
    min-width: 140px;
    filter: none;
}

/* ============================================================================
   LEGAL/DOCUMENTS PAGE (AGB)
   ============================================================================ */

.legal-hero {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(11, 101, 174, 0.08) 0%, rgba(11, 101, 174, 0.02) 100%);
    border-radius: 16px;
    margin-bottom: 3rem;
}

.legal-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.legal-hero .subtitle,
.legal-hero h2 {
    font-size: 1.375rem;
    font-weight: 400;
    color: var(--color-text-muted) !important;
    margin: 0;
}

.legal-hero p {
    margin: 0;
}

.legal-hero .date {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    font-weight: 500;
    margin-top: 0.5rem;
}

.document-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin: 2rem 0 3rem 0;
}

.document-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    text-decoration: none;
    transition: all 150ms ease;
    color: inherit;
}

.document-card:hover {
    box-shadow: 0 4px 16px rgba(11, 101, 174, 0.15);
    border-left-color: var(--color-primary-dark);
}

.document-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
}

.document-content {
    flex: 1;
}

.document-content h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.document-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.document-publisher {
    color: var(--color-text-secondary);
}

.document-date {
    color: #868e96;
    font-size: 0.85rem;
}

.document-action {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.9rem;
}

.document-action svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .legal-hero h1 {
        font-size: 2rem;
    }

    .document-card {
        flex-direction: column;
        text-align: center;
    }

    .document-meta {
        align-items: center;
    }

    .document-action {
        width: 100%;
        justify-content: center;
        padding-top: 1rem;
        border-top: 1px solid var(--color-bs-gray-200);
    }
}

/* ============================================================================
   NEWSLETTER PAGE
   ============================================================================ */

.newsletter-hero {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, rgba(11, 101, 174, 0.08) 0%, rgba(11, 101, 174, 0.02) 100%);
    border-radius: 16px;
    margin-bottom: 3rem;
}

.newsletter-hero h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.newsletter-hero .subtitle,
.newsletter-hero h2 {
    font-size: 1.25rem;
    color: var(--color-text-muted) !important;
    margin: 0;
}

.newsletter-benefits {
    margin: 3rem 0;
}

.newsletter-benefits h2 {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 2rem;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.benefit-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 150ms ease;
}

.benefit-card:hover {
    box-shadow: 0 4px 16px rgba(11, 101, 174, 0.15);
    transform: translateY(-4px);
}

.benefit-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem auto;
    background: linear-gradient(135deg, var(--color-info-bg) 0%, var(--color-info-bg-light) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-primary);
}

.benefit-card h3 {
    font-size: 1.25rem;
    color: var(--color-text-primary);
    margin: 0 0 0.75rem 0;
}

.benefit-card p {
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

.newsletter-form-section {
    max-width: 600px;
    margin: 3rem auto;
}

.newsletter-form-section h2 {
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.newsletter-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

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

.newsletter-form label {
    display: block;
    font-weight: 600;
    color: var(--color-secondary-dark);
    margin-bottom: 0.5rem;
}

.newsletter-form label.required::after {
    content: ' *';
    color: #e74c3c;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.newsletter-form input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

.newsletter-form .form-help {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

.newsletter-form .form-actions {
    margin-top: 2rem;
}

.newsletter-form .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
}

.newsletter-form .btn-primary svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 768px) {
    .newsletter-hero h1 {
        font-size: 2rem;
    }

    .benefits-grid {
        grid-template-columns: 1fr;
    }

    .newsletter-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .newsletter-form-section {
        padding: 0 1rem;
    }
}

/* ============================================================================
   DATACENTER PAGE - HERO BANNER
   ============================================================================ */

.datacenter-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    margin-bottom: 3rem;
    overflow: hidden;
    background: linear-gradient(135deg, #0b65ae 0%, #084675 100%);
}

.datacenter-hero-content {
    text-align: center;
    color: var(--color-white);
    z-index: 2;
    padding: 3rem 2rem;
    max-width: 900px;
}

.datacenter-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-white);
    margin: 0 0 1rem 0;
}

.datacenter-hero h2 {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--color-white);
    margin: 0 0 2rem 0;
    opacity: 0.95;
}

.datacenter-stats-mini {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.stat-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.stat-mini-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-white);
    line-height: 1;
}

.stat-mini-label {
    font-size: 0.875rem;
    color: var(--color-white);
    opacity: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 768px) {
    .datacenter-hero {
        min-height: 300px;
    }

    .datacenter-hero h1 {
        font-size: 2rem;
    }

    .datacenter-hero h2 {
        font-size: 1.125rem;
    }

    .datacenter-stats-mini {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .stat-mini-number {
        font-size: 2rem;
    }
}

/* Facts Grid */
.facts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.fact-item {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    padding: 1rem 1.25rem;
    transition: all 150ms ease;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.fact-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(11, 101, 174, 0.15);
}

.fact-icon {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-top: 0.5rem;
}

.fact-text {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 0.9375rem;
}

/* Feature Cards */
.feature-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin: 2rem 0;
}

.feature-card {
    position: relative;
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 2rem;
    transition: all 150ms ease;
}

.feature-card:hover {
    box-shadow: 0 4px 16px rgba(11, 101, 174, 0.15);
}

.feature-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.feature-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-white);
}

.feature-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 1rem 0;
}

.feature-description {
    color: var(--color-text-secondary);
    line-height: 1.6;
    font-size: 0.9375rem;
}

/* Facts Category Cards - used inside feature-cards grid */
.facts-category {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 150ms ease;
}

.facts-category:hover {
    box-shadow: 0 4px 16px rgba(11, 101, 174, 0.12);
    border-color: var(--color-primary);
}

.facts-category-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--color-bs-gray-100);
}

.facts-category-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.facts-category-icon svg {
    width: 24px;
    height: 24px;
    color: var(--color-white);
}

.facts-category-header h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-dark);
}

.facts-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.facts-list li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.5rem;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
    border-bottom: 1px solid var(--color-bs-gray-100);
}

.facts-list li:last-child {
    border-bottom: none;
}

.facts-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.875rem;
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
}


/* Certifications Box */
.certifications-box {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bae6fd;
    border-left: 4px solid var(--color-primary);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.certifications-box strong {
    color: var(--color-primary);
    display: block;
    margin-bottom: 0.75rem;
}

.certifications-list {
    color: var(--color-text-secondary);
    line-height: 1.7;
    font-size: 0.9375rem;
}

@media (max-width: 768px) {
    .facts-grid,
    .feature-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================================================
   LEGAL PAGES (Impressum, Datenschutz, AGB)
   ============================================================================ */

/* Hide Cookiebot dialog on privacy page (already showing cookie info) */
.legal-page #CybotCookiebotDialog,
.legal-page #CybotCookiebotDialogBodyUnderlay {
    display: none !important;
}

/* Cookiebot Widget - positioned left, vertically centered with footer (64px height) */
/* Widget is 50x50px, footer is 64px. Center: (64-50)/2 = 7px from bottom */
#CookiebotWidget {
    position: fixed !important;
    bottom: 7px !important;
    left: 7px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    transition: none !important;
    z-index: 999 !important;
}

/* Ensure widget stays in place on all screen sizes */
@media (max-width: 1024px) {
    #CookiebotWidget {
        bottom: 7px !important;
        left: 7px !important;
    }
}

@media (max-width: 768px) {
    #CookiebotWidget {
        bottom: 7px !important;
        left: 7px !important;
    }
}

.legal-page {
    width: 100%;
}

.legal-page h1 {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 2rem 0;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--color-primary);
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3rem;
}

.legal-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 150ms ease;
}

.legal-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.1);
}

.legal-card-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.legal-card-icon svg {
    width: 22px;
    height: 22px;
    color: var(--color-white);
}

.legal-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 0.75rem 0;
}

.legal-card p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.legal-card p a {
    color: var(--color-primary);
}

.legal-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-bs-gray-200);
}

.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.legal-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-dark);
    margin: 0 0 1rem 0;
}

.legal-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin: 1.5rem 0 0.75rem 0;
}

.legal-section h3:first-child {
    margin-top: 0;
}

.legal-section p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: var(--color-text-secondary);
    margin: 0 0 1rem 0;
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section a {
    color: var(--color-primary);
}

.legal-section small {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.legal-section-muted {
    background: var(--color-bs-gray-100);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    border-bottom: none;
}

.legal-section-muted h3 {
    font-size: 1rem;
    margin-top: 0;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.social-links a {
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--color-bs-gray-100);
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 150ms ease;
}

.social-links a:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Social Links with Icons - displays icon + text label */
.social-links-icons a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
}

.social-links-icons img {
    width: 20px;
    height: 20px;
    opacity: 0.7;
    transition: opacity 150ms ease;
}

.social-links-icons a:hover img {
    opacity: 1;
    filter: brightness(0) invert(1);
}

@media (max-width: 768px) {
    .legal-grid {
        grid-template-columns: 1fr;
    }

    .legal-page h1 {
        font-size: 1.75rem;
    }
}

/* Press Page - Download Section */
.press-downloads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

.press-download-category {
    padding: 0;
}

.press-download-category h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.press-download-category h3 svg {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
}

.press-category-desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0 0 1rem 0;
}

.press-download-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.press-download-buttons .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    padding: 0.5rem 0.875rem;
}

.press-download-buttons .btn svg {
    width: 16px;
    height: 16px;
}

@media (max-width: 480px) {
    .press-download-buttons {
        flex-direction: column;
    }

    .press-download-buttons .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   HOSTING PLANS - CARD LAYOUT
   Modern card-based pricing display for webhosting.php
   ============================================================================ */

/* Contract Duration Toggle - MVL (Minimum Vertragslaufzeit) Classes */
.MVL1,
.MVL12 {
    display: none;
}

.MVL1.active,
.MVL12.active {
    display: block;
}

/* Special handling for table rows */
tr.MVL1,
tr.MVL12 {
    display: none;
}

tr.MVL1.active,
tr.MVL12.active {
    display: table-row;
}

/* Special handling for inline elements */
h1.MVL1,
h1.MVL12 {
    display: none;
}

h1.MVL1.active,
h1.MVL12.active {
    display: block;
}

/* Special handling for pricing buttons */
a.pricing-cta.MVL1,
a.pricing-cta.MVL12 {
    display: none;
}

a.pricing-cta.MVL1.active,
a.pricing-cta.MVL12.active {
    display: block;
}

/* ============================================================================
   WEBHOSTING PRICING SECTION - DEPRECATED
   All hosting pages now use global .pricing-* classes from vps2025 pattern
   Legacy .hosting-plan__* classes removed - use .pricing-* instead
   ============================================================================ */

/* Legacy classes removed - webhosting.php now uses:
   - .pricing-section
   - .pricing-toggle / .pricing-toggle-btn
   - .pricing-grid
   - .pricing-card / .pricing-card.recommended
   - .pricing-badge
   - .pricing-size
   - .pricing-specs / .pricing-spec / .pricing-spec-label / .pricing-spec-value
   - .pricing-price / .pricing-amount / .pricing-period
   - .pricing-cta
*/

/* Features list for "In allen Tarifen enthalten" */
.hosting-features-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.hosting-features-list li {
    padding: 1rem;
    background: var(--color-bs-gray-100);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 1.6;
}

.hosting-features-list li strong {
    display: block;
    color: var(--color-primary);
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

/* Details section */
.hosting-details-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid var(--color-bs-gray-200);
}

.hosting-details-section h2 {
    text-align: center;
    margin-bottom: 1rem;
}

.hosting-details-section > p {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
}

/* SVG icons in detail table */
.hosting-detail-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin-right: 0.5rem;
    stroke: var(--color-white);
}

/* Product switcher enhancements for hosting */
.product-switcher h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 1rem;
    text-align: center;
}

/* Responsive behavior - aligned with vps2025 pricing-grid */
@media (max-width: 1200px) {
    .hosting-plans-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }

    .hosting-plan__title,
    .pricing-size.hosting-plan__title {
        font-size: 1.125rem;
    }
}

@media (max-width: 768px) {
    .hosting-plans-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .hosting-plan__title,
    .pricing-size.hosting-plan__title {
        font-size: 1.375rem;
    }

    .hosting-plan__price-amount {
        font-size: 2.5rem;
    }

    .hosting-plan__price-period {
        font-size: 1rem;
    }

    .hosting-features-list {
        grid-template-columns: 1fr;
    }

    .hosting-details-section {
        margin-top: 2rem;
        padding-top: 2rem;
    }
}

@media (max-width: 480px) {
    .hosting-plan {
        border-radius: 12px;
    }

    /* Mobile badge - no adjustment needed, already flush */
    .hosting-plan__badge {
        padding: 0.375rem 0.75rem;
    }

    .hosting-plan__title,
    .pricing-size.hosting-plan__title {
        padding: 1rem 1rem 0 1rem;
        font-size: 1.25rem;
    }

    .hosting-plan__subtitle {
        padding: 0 1rem 0.75rem 1rem;
    }

    .hosting-plan__price-container {
        padding: 0.75rem 1rem 1rem 1rem;
    }

    .hosting-plan__features {
        padding: 1rem;
    }

    .hosting-plan__feature {
        padding: 0.5rem 0;
        font-size: 0.8125rem;
    }

    .hosting-plan .pricing-cta {
        margin: 1rem;
        width: calc(100% - 2rem);
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* ============================================================================
   HOSTING COMPARISON TABLE
   Modern, categorized comparison table with sticky header
   ============================================================================ */

.hosting-comparison-section {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid var(--color-gray-150);
}

.hosting-comparison-section__intro {
    max-width: 800px;
    margin: 0 auto 2rem auto;
    text-align: center;
    font-size: 1.0625rem;
    color: var(--color-text-muted);
}

.hosting-comparison-wrapper {
    overflow-x: auto;
    margin: 0 -1rem;
    padding: 0 1rem;
    /* Smooth scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) var(--color-bs-gray-100);
}

.hosting-comparison-wrapper::-webkit-scrollbar {
    height: 8px;
}

.hosting-comparison-wrapper::-webkit-scrollbar-track {
    background: var(--color-bs-gray-100);
    border-radius: 4px;
}

.hosting-comparison-wrapper::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

.hosting-comparison-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

.hosting-comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Sticky Header */
.hosting-comparison-table__header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.hosting-comparison-table__header th {
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--color-white);
    font-weight: 700;
    font-size: 1rem;
    vertical-align: middle;
}

.hosting-comparison-table__feature-col {
    min-width: 250px;
    text-align: left !important;
    padding-left: 1.5rem !important;
}

.hosting-comparison-table__plan-col {
    min-width: 140px;
    width: 140px;
}

.hosting-comparison-table__plan-col--featured {
    /* Removed background for cleaner look */
    position: relative;
}

.hosting-comparison-table__plan-col--featured::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-primary);
}

.hosting-comparison-table__plan-name {
    font-size: 1.125rem;
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

.hosting-comparison-table__plan-tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hosting-comparison-table__plan-tag--featured {
    background: linear-gradient(135deg, var(--color-success) 0%, #15803d 100%);
}

/* Table Body */
.hosting-comparison-table__body tr {
    transition: background-color 0.2s ease;
}

.hosting-comparison-table__body tr:not(.hosting-comparison-table__category-row):hover {
    background-color: var(--color-bs-gray-100);
}

/* Alternating row colors for better readability */
.hosting-comparison-table__body tr:not(.hosting-comparison-table__category-row):nth-child(even) {
    background-color: #fafbfc;
}

.hosting-comparison-table__body tr:not(.hosting-comparison-table__category-row):nth-child(even):hover {
    background-color: #f0f2f5;
}

/* Category Rows */
.hosting-comparison-table__category-row {
    background: linear-gradient(135deg, var(--color-bs-gray-100) 0%, var(--color-bs-gray-200) 100%);
}

.hosting-comparison-table__category {
    padding: 1.25rem 1.5rem !important;
    text-align: left !important;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-primary);
    border-top: 2px solid var(--color-gray-350);
}

.hosting-comparison-table__category-row:first-child .hosting-comparison-table__category {
    border-top: none;
}

.hosting-comparison-table__category-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 0.75rem;
    vertical-align: middle;
    color: var(--color-primary);
}

/* Feature Rows */
.hosting-comparison-table__feature {
    padding: 1rem 1.5rem;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.9375rem;
}

.hosting-comparison-table__body td {
    padding: 1rem;
    text-align: center;
    vertical-align: middle;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    border-bottom: 1px solid var(--color-gray-150);
}

.hosting-comparison-table__body th {
    border-bottom: 1px solid var(--color-gray-150);
}

/* Featured Column Highlight - Subtle and Clean */
.hosting-comparison-table__featured-col {
    /* Removed gradient background for cleaner look */
    position: relative;
}

/* Value Styling */
.hosting-comparison-table__check {
    display: inline-block;
    width: 24px;
    height: 24px;
    color: var(--color-success);
    vertical-align: middle;
}

.hosting-comparison-table__value {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.hosting-comparison-table__optional {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.875rem;
}

.hosting-comparison-table__not-included {
    color: #adb5bd;
    font-size: 1.25rem;
    font-weight: 300;
}

.hosting-comparison-table__unlimited {
    color: var(--color-success);
    font-weight: 700;
    font-size: 0.875rem;
}

/* Links in table */
.hosting-comparison-table a {
    color: var(--color-primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.hosting-comparison-table a:hover {
    border-bottom-color: var(--color-primary);
}

/* Responsive Design */
@media (max-width: 992px) {
    .hosting-comparison-section {
        margin-top: 3rem;
        padding-top: 2rem;
    }

    .hosting-comparison-table__feature-col {
        min-width: 220px;
    }

    .hosting-comparison-table__plan-col {
        min-width: 120px;
        width: 120px;
    }

    .hosting-comparison-table__header th {
        padding: 1.25rem 0.75rem;
        font-size: 0.9375rem;
    }

    .hosting-comparison-table__plan-name {
        font-size: 1rem;
    }

    .hosting-comparison-table__feature {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }

    .hosting-comparison-table__body td {
        padding: 0.875rem 0.5rem;
        font-size: 0.875rem;
    }

    .hosting-comparison-table__category {
        padding: 1rem !important;
        font-size: 1rem;
    }

    .hosting-comparison-table__category-icon {
        width: 20px;
        height: 20px;
        margin-right: 0.5rem;
    }
}

@media (max-width: 768px) {
    .hosting-comparison-wrapper {
        margin: 0 -0.5rem;
        padding: 0 0.5rem;
    }

    .hosting-comparison-table__feature-col {
        min-width: 200px;
        padding-left: 1rem !important;
    }

    .hosting-comparison-table__plan-col {
        min-width: 100px;
        width: 100px;
    }

    .hosting-comparison-table__header th {
        padding: 1rem 0.5rem;
        font-size: 0.875rem;
    }

    .hosting-comparison-table__plan-name {
        font-size: 0.9375rem;
    }

    .hosting-comparison-table__plan-tag {
        font-size: 0.6875rem;
        padding: 0.2rem 0.5rem;
    }

    .hosting-comparison-table__feature {
        padding: 0.75rem 0.75rem;
        font-size: 0.8125rem;
    }

    .hosting-comparison-table__body td {
        padding: 0.75rem 0.375rem;
        font-size: 0.8125rem;
    }

    .hosting-comparison-table__check {
        width: 20px;
        height: 20px;
    }

    .hosting-comparison-table__category {
        padding: 0.875rem 0.75rem !important;
        font-size: 0.9375rem;
    }
}

@media (max-width: 480px) {
    .hosting-comparison-section__intro {
        font-size: 0.9375rem;
    }

    .hosting-comparison-table {
        border-radius: 8px;
    }

    .hosting-comparison-table__feature-col {
        min-width: 180px;
    }

    .hosting-comparison-table__plan-col {
        min-width: 90px;
        width: 90px;
    }
}

/* Print Styles */
@media print {
    .hosting-comparison-wrapper {
        overflow: visible;
    }

    .hosting-comparison-table__header {
        position: static;
    }

    .hosting-comparison-table__body tr:not(.hosting-comparison-table__category-row):hover {
        background-color: transparent;
    }

    .contract-duration-selector {
        display: none;
    }
}

/* ============================================================================
   Modern CSS Tooltips
   ============================================================================
   Pure CSS tooltip implementation with accessibility support
   Replaces old title-attribute tooltips with modern, styled variants
   ========================================================================= */

.tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    cursor: help;
    border-bottom: 1px dotted currentColor;
    transition: border-color 0.2s ease;
}

.tooltip:hover,
.tooltip:focus {
    border-color: var(--color-primary);
}

/* Tooltip Icon */
.tooltip__icon {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    stroke: var(--color-text-muted);
    transition: stroke 0.2s ease, transform 0.2s ease;
}

.tooltip:hover .tooltip__icon,
.tooltip:focus .tooltip__icon {
    stroke: var(--color-primary);
    transform: scale(1.1);
}

/* Tooltip Content (Pseudo-element) */
.tooltip::before,
.tooltip::after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 1000;
}

/* Tooltip Text Bubble */
.tooltip::before {
    content: attr(data-tooltip);
    width: max-content;
    max-width: 280px;
    padding: 0.625rem 0.875rem;
    background: #2d3748;
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15),
                0 2px 4px rgba(0, 0, 0, 0.1);
    white-space: normal;
    word-wrap: break-word;
    margin-bottom: 8px;
}

/* Tooltip Arrow */
.tooltip::after {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    border-color: #2d3748 transparent transparent transparent;
    margin-bottom: 2px;
}

/* Show tooltip on hover and focus */
.tooltip:hover::before,
.tooltip:hover::after,
.tooltip:focus::before,
.tooltip:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Tooltip positioned to the right (for left-aligned elements) */
.tooltip--right::before,
.tooltip--right::after {
    left: 0;
    transform: translateX(0) translateY(-8px);
}

.tooltip--right:hover::before,
.tooltip--right:hover::after,
.tooltip--right:focus::before,
.tooltip--right:focus::after {
    transform: translateX(0) translateY(0);
}

/* Tooltip positioned to the left (for right-aligned elements) */
.tooltip--left::before,
.tooltip--left::after {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(-8px);
}

.tooltip--left:hover::before,
.tooltip--left:hover::after,
.tooltip--left:focus::before,
.tooltip--left:focus::after {
    transform: translateX(0) translateY(0);
}

/* Touch device support */
@media (hover: none) and (pointer: coarse) {
    .tooltip::before,
    .tooltip::after {
        display: none;
    }

    /* Fallback: show title attribute on touch devices */
    .tooltip {
        cursor: default;
        border-bottom-style: solid;
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tooltip::before {
        max-width: 240px;
        font-size: 0.8125rem;
        padding: 0.5rem 0.75rem;
    }
}

/* Accessibility: Hide tooltip icon from screen readers */
.tooltip__icon {
    pointer-events: none;
}

/* Focus visible for keyboard navigation */
.tooltip:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 2px;
}

.tooltip:focus:not(:focus-visible) {
    outline: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .tooltip::before {
        background: #1a202c;
        color: #e2e8f0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
                    0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .tooltip::after {
        border-color: #1a202c transparent transparent transparent;
    }

    .tooltip__icon {
        stroke: #a0aec0;
    }

    .tooltip:hover .tooltip__icon,
    .tooltip:focus .tooltip__icon {
        stroke: #4299e1;
    }
}

/* Print styles: hide tooltips */
@media print {
    .tooltip::before,
    .tooltip::after {
        display: none !important;
    }

    .tooltip {
        border-bottom: none;
    }

    .tooltip__icon {
        display: none;
    }
}

/* ============================================================================
   Accessibility Utilities
   ============================================================================
   Screen reader only content and other a11y helpers
   ========================================================================= */

/**
 * Visually Hidden
 * Hides content visually but keeps it accessible to screen readers
 * Used for ARIA live regions and other screen-reader-only content
 */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/**
 * Visually Hidden Focusable
 * Makes visually hidden content visible when focused
 * Useful for skip links and other keyboard navigation aids
 */
.visually-hidden:focus,
.visually-hidden:active {
    position: static !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ============================================================================
   LOGIN PAGE
   ============================================================================ */

.login-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.login-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    transition: all 150ms ease;
}

.login-card:hover {
    box-shadow: 0 8px 32px rgba(11, 101, 174, 0.15);
    border-color: var(--color-primary);
}

.login-card-header {
    text-align: center;
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid var(--color-bs-gray-100);
}

.login-card-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 0.5rem 0;
}

.login-card-header p {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0;
}

.login-card-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.2);
}

.login-card-icon svg {
    width: 32px;
    height: 32px;
    color: var(--color-white);
    stroke: var(--color-white);
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.login-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-form-group label {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.95rem;
}

.login-form-group input[type="text"],
.login-form-group input[type="password"] {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--color-bs-gray-300);
    border-radius: 8px;
    font-size: 1rem;
    transition: all 150ms ease;
    font-family: inherit;
    box-sizing: border-box;
}

.login-form-group input[type="text"]:focus,
.login-form-group input[type="password"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

.login-form-group input::placeholder {
    color: var(--color-text-muted);
}

.login-form button[type="submit"] {
    background: var(--color-primary);
    color: var(--color-white);
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-family: inherit;
    margin-top: 0.5rem;
    width: 100%;
}

.login-form button[type="submit"]:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.3);
}

.login-forgot-link {
    text-align: center;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-bs-gray-100);
}

.login-forgot-link a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 150ms ease;
    font-size: 0.95rem;
}

.login-forgot-link a:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.login-info-box {
    background: var(--color-bs-gray-100);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 3rem;
}

.login-info-box h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.login-info-box ul {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--color-text-secondary);
}

.login-info-box ul li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

.login-inactive {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: var(--color-white);
    padding: 3rem 2rem;
    border-radius: 16px;
    text-align: center;
    margin: 2rem auto;
    max-width: 600px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.login-inactive h1 {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--color-white);
}

.login-inactive h2 {
    font-size: 1.25rem;
    font-weight: 500;
    margin: 0;
    opacity: 0.9;
    color: var(--color-white);
}

@media (max-width: 768px) {
    .login-container {
        grid-template-columns: 1fr;
    }

    .login-card {
        padding: 2rem 1.5rem;
    }

    .login-card-header h2 {
        font-size: 1.5rem;
    }
}

/* ============================================================================
   ERROR PAGE (404)
   Modern, user-friendly 404 error page with helpful navigation
   ============================================================================ */

.error-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}

.error-page-content {
    margin-bottom: 3rem;
}

.error-page-icon {
    margin-bottom: 1.5rem;
}

.error-page-icon svg {
    color: var(--color-primary);
    opacity: 0.8;
}

.error-page-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
}

.error-page-code {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 1.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.error-page-message {
    font-size: 1.125rem;
    color: var(--color-text-light);
    margin: 0 0 2rem 0;
    line-height: 1.6;
}

.error-page-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.error-page-suggestions {
    background-color: var(--color-bs-gray-100);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.error-page-suggestions-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 1.5rem 0;
}

.error-page-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.error-page-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-white);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text);
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--color-bs-gray-200);
}

.error-page-link:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.15);
    transform: translateY(-2px);
}

.error-page-link svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

.error-page-link span {
    font-size: 0.9375rem;
}

.error-page-help {
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-bs-gray-200);
}

.error-page-help p {
    margin: 0;
    color: var(--color-text-light);
    font-size: 0.9375rem;
}

.error-page-phone {
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.error-page-phone:hover {
    text-decoration: underline;
}

.error-page-hours {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

@media (max-width: 600px) {
    .error-page {
        padding: 2rem 1rem;
    }

    .error-page-title {
        font-size: 1.5rem;
    }

    .error-page-message {
        font-size: 1rem;
    }

    .error-page-actions {
        flex-direction: column;
    }

    .error-page-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .error-page-links {
        grid-template-columns: 1fr;
    }

    .error-page-suggestions {
        padding: 1.5rem 1rem;
    }
}

/* ==========================================================================
   Addon Selection Grid
   ========================================================================== */

/* Grid layout for addon selection cards */
.addon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

/* Icon button for addon selection */
.btn-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem 1rem;
    background: var(--color-white);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 12px;
    color: var(--color-secondary-dark);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9375rem;
    transition: all 150ms ease;
    min-height: 120px;
    text-align: center;
}

.btn-icon:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.15);
}

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

.btn-icon.btn-secondary {
    background: var(--color-bs-gray-100);
    border-color: var(--color-bs-gray-300);
}

.btn-icon.btn-secondary:hover {
    border-color: var(--color-secondary);
    background: var(--color-bs-gray-200);
    color: var(--color-secondary-dark);
}

/* SVG icon within btn-icon */
.btn-icon svg {
    width: 32px;
    height: 32px;
    stroke: var(--color-primary);
    stroke-width: 1.5;
    fill: none;
}

.btn-icon:hover svg {
    stroke: var(--color-primary-dark);
}

.btn-icon.btn-secondary svg {
    stroke: var(--color-secondary);
}

.btn-icon.btn-secondary:hover svg {
    stroke: var(--color-secondary-dark);
}

/* Legacy icon support (PNG) */
.btn-icon .icon {
    width: 32px;
    height: 32px;
    opacity: 0.85;
}

.btn-icon:hover .icon {
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .addon-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .btn-icon {
        padding: 1rem 0.75rem;
        min-height: 100px;
        font-size: 0.875rem;
    }

    .btn-icon svg,
    .btn-icon .icon {
        width: 28px;
        height: 28px;
    }
}

/* ============================================================================
   STATUS DOTS
   Visual status indicators (colored dots)
   ============================================================================ */

.status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-bs-gray-400);
}

.status-dot--success {
    background-color: var(--color-success);
}

.status-dot--warning {
    background-color: var(--color-warning);
}

.status-dot--error {
    background-color: var(--color-error);
}

.status-dot--info {
    background-color: var(--color-info);
}

.status-dot--pending {
    background-color: var(--color-warning);
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================================
   TABLE - NETCLUSIVE
   Standard table styling for customer area
   ============================================================================ */

.table-netclusive {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-300);
    margin-bottom: 1.5rem;
}

.table-netclusive th,
.table-netclusive td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-bs-gray-200);
    vertical-align: middle;
}

.table-netclusive thead th {
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 2px solid var(--color-secondary);
}

.table-netclusive thead th a {
    color: var(--color-white);
    text-decoration: none;
}

.table-netclusive thead th a:hover {
    text-decoration: underline;
}

.table-netclusive tbody tr:last-child td {
    border-bottom: none;
}

/* Table row hover effect (replaces inline onmouseover) */
.table-netclusive tbody tr:hover {
    background-color: var(--color-bs-gray-100);
}

/* Canceled/deleted row highlight */
.table-netclusive tr.row-canceled {
    background-color: #ffeeee;
}

.table-netclusive tr.row-canceled:hover {
    background-color: #ffe0e0;
}

/* Pending/waiting row highlight */
.table-netclusive tr.row-pending {
    background-color: #ffffcc;
}

.table-netclusive tr.row-pending:hover {
    background-color: #ffff99;
}

/* Domain info cell - contains domain name and details */
.domain-cell {
    text-align: left;
}

.domain-cell a {
    font-weight: 500;
    color: var(--color-primary);
}

.domain-cell small {
    display: block;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Contract header row */
.table-netclusive tr.contract-header td {
    background-color: var(--color-secondary);
    color: var(--color-white);
    font-weight: 700;
    padding: 0.75rem 1rem;
}

.table-netclusive tr.contract-header a {
    color: var(--color-white);
}

/* Contract summary row */
.table-netclusive tr.contract-summary td {
    font-weight: 700;
    padding: 0.75rem 1rem;
    border-top: 2px solid var(--color-bs-gray-300);
}

/* Selected row highlight */
.table-netclusive tr.table-row-selected {
    background-color: var(--color-bs-gray-100);
}

/* Checkbox/Radio column - narrow width for selection inputs */
.table-netclusive th.col-select,
.table-netclusive td.col-select {
    width: 50px;
    text-align: center;
}

/* ============================================================================
   TABLE - CLEAN
   Borderless table for use inside config-cards (header provided by card)
   ============================================================================ */

.table-clean {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    table-layout: fixed;
}

.table-clean th,
.table-clean td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-bs-gray-200);
    vertical-align: middle;
}

.table-clean thead th {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.8125rem;
    border-bottom: none;
}

.table-clean tbody tr:last-child td {
    border-bottom: none;
}

.table-clean tbody tr:hover {
    background-color: var(--color-bs-gray-50);
}

/* Text alignment helpers for table cells */
.table-clean .text-right {
    text-align: right;
}

.table-clean .text-center {
    text-align: center;
}

.table-clean .text-muted {
    color: var(--color-text-muted);
}

/* Column width helpers for tables */
.col-icon {
    width: 64px;
}

/* Table inside config-card: seamless integration */
.config-card .table-clean {
    margin: 0;
    border: none;
}

.config-card .table-clean thead th {
    background: var(--color-bs-gray-100);
    color: var(--color-text);
    border: none;
    border-bottom: 1px solid var(--color-bs-gray-200);
}

.config-card .table-clean tbody td:first-child {
    border-left: none;
}

.config-card .table-clean tbody td:last-child {
    border-right: none;
}

.config-card .table-clean tbody tr:last-child td {
    border-bottom: none;
}

/* Table layout modifiers */
.table-sortable,
.table-auto {
    table-layout: auto;
}

/* Sortable table headers */
.table-clean .sortable-header {
    position: relative;
    padding-right: 1.5rem;
    user-select: none;
    cursor: pointer;
}

.table-clean .sortable-header::after {
    content: '';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(255, 255, 255, 0.5);
    margin-top: 3px;
}

.table-clean .sortable-header::before {
    content: '';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-bottom-color: rgba(255, 255, 255, 0.5);
    margin-top: -9px;
}

.table-clean .sortable-header.sort-asc::after {
    border-top-color: var(--color-white);
}

.table-clean .sortable-header.sort-asc::before {
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.table-clean .sortable-header.sort-desc::before {
    border-bottom-color: var(--color-white);
}

.table-clean .sortable-header.sort-desc::after {
    border-top-color: rgba(255, 255, 255, 0.5);
}

.table-clean .sortable-header:hover {
    background-color: var(--color-primary-dark);
}

/* Sortable headers inside config-card need different colors (gray background) */
.config-card .table-clean .sortable-header::after {
    border-top-color: var(--color-text-muted);
}

.config-card .table-clean .sortable-header::before {
    border-bottom-color: var(--color-text-muted);
}

.config-card .table-clean .sortable-header.sort-asc::after {
    border-top-color: var(--color-primary);
}

.config-card .table-clean .sortable-header.sort-desc::before {
    border-bottom-color: var(--color-primary);
}

.config-card .table-clean .sortable-header:hover {
    background-color: var(--color-bs-gray-200);
}

/* Row highlighting for table-clean */
.table-clean tr.row-canceled {
    background-color: #ffeeee;
}

.table-clean tr.row-canceled:hover {
    background-color: #ffe0e0;
}

.table-clean tr.row-pending {
    background-color: #ffffcc;
}

.table-clean tr.row-pending:hover {
    background-color: #ffff99;
}

/* ============================================================================
   PASSWORD OVERLAY
   Modal overlay for password change prompt
   ============================================================================ */

/* Block body scroll when password overlay is active (no JS needed) */
body:has(.password-overlay) {
    overflow: hidden;
}

.password-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75);
    z-index: 999999;
    overflow: auto;
}

.password-overlay-content {
    background-color: var(--color-white);
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 600px;
    width: 90%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    border-radius: 8px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

.password-overlay-inner {
    padding: 3rem;
}

.password-overlay-inner h1 {
    margin-bottom: 0.5rem;
    color: var(--color-primary);
}

.password-overlay-inner h2 {
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-bottom: 1.5rem;
}

.password-overlay-inner p {
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* ============================================================================
   UTILITY CLASSES - SPACING
   Common margin/padding utilities to replace inline styles
   ============================================================================ */

/* Margin Top */
.mt-0 { margin-top: 0 !important; }
.mt-0-5 { margin-top: 0.5rem !important; }
.mt-1 { margin-top: 1rem !important; }
.mt-1-5 { margin-top: 1.5rem !important; }
.mt-2 { margin-top: 2rem !important; }
.mt-3 { margin-top: 3rem !important; }

/* Margin Bottom */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 1rem !important; }
.mb-1-5 { margin-bottom: 1.5rem !important; }
.mb-2 { margin-bottom: 2rem !important; }
.mb-3 { margin-bottom: 3rem !important; }

/* Margin Y (top + bottom) */
.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-2 { margin-top: 2rem !important; margin-bottom: 2rem !important; }
.my-3 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* ============================================================================
   UTILITY CLASSES - TYPOGRAPHY
   ============================================================================ */

.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-inherit { color: inherit; }

/* ============================================================================
   UTILITY CLASSES - MISC
   Additional utilities to replace inline styles
   ============================================================================ */

/* Iframe without border */
.iframe-borderless { border: none; }

/* Input text transform */
.input-uppercase { text-transform: uppercase; }

/* List style position */
.list-inside {
    margin: 0.5rem 0 0 0;
    padding: 0;
    list-style-position: inside;
}

/* Max width variants */
.max-w-120 { max-width: 120px; }

/* Icon sizing */
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }

/* Single column grid override */
.grid-single { grid-template-columns: 1fr; }

/* Word break for long content */
.word-break-all { word-break: break-all; }

/* Empty state message */
.empty-message {
    text-align: center;
    color: #666;
    padding: 2rem;
}

/* Text color variants */
.text-error { color: #dc2626; }

/* Padding utilities */
.p-3 { padding: 12px; }

/* Intro text styling */
.intro-text {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #555;
    margin-bottom: 2rem;
}

/* Disclaimer text */
.disclaimer-text {
    margin-top: 2rem;
    font-size: 0.875rem;
    color: #666;
    text-align: center;
}

/* ============================================================================
   UTILITY CLASSES - FORM INPUTS
   ============================================================================ */

/* Compact input width variants */
.form-input-sm { width: 100px; }
.form-input-md { width: 200px; }

/* Input group (input + addon text) */
.input-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.input-group-text {
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* Checkbox/Radio styling - duplicate removed, using definition from line ~9026 */

/* ============================================================================
   CONTRACT CANCELLATION PAGE
   Styles for vertrag-kuendigung.php
   ============================================================================ */

/* Hero Warning Variant */
.content-hero--warning {
    background: linear-gradient(135deg, #fef3cd 0%, #fff3cd 100%);
    border-bottom: 3px solid #f0ad4e;
}

.content-hero--warning .content-hero-icon {
    color: #856404;
}

.content-hero--warning h1 {
    color: #856404;
}

.content-hero--warning h2 {
    color: #6c5a1e;
}

/* Contract Info Card */
.cancel-contract-card {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.cancel-contract-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #0a5a9d 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cancel-contract-icon svg {
    width: 28px;
    height: 28px;
    color: #fff;
}

.cancel-contract-info h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--color-text);
}

.cancel-contract-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.cancel-contract-meta code {
    background: #f1f3f4;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    font-size: 0.8125rem;
}

.cancel-contract-includes {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.cancel-includes-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    background: #e7f1fa;
    color: var(--color-primary);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.cancel-includes-badge svg {
    width: 14px;
    height: 14px;
}

/* Cancel Steps */
.cancel-step {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.cancel-step-header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f1f3f4;
}

.cancel-step-number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.cancel-step-title h3 {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
}

.cancel-step-title p {
    margin: 0;
    font-size: 0.875rem;
}

/* Cancel Groups */
.cancel-group {
    margin-bottom: 1.5rem;
}

.cancel-group:last-child {
    margin-bottom: 0;
}

.cancel-group-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text);
}

.cancel-group-title svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary);
}

.cancel-group-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: #f1f3f4;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}

.cancel-group-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

/* Cancel Items */
.cancel-item {
    padding: 0.75rem;
    background: #fafbfc;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    margin-bottom: 0.5rem;
}

.cancel-item:last-child {
    margin-bottom: 0;
}

.cancel-item--main {
    background: #fff8e6;
    border-color: #f0ad4e;
}

.cancel-item--disabled {
    opacity: 0.6;
}

.cancel-item-name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.cancel-item-id {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    background: #e9ecef;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

/* Main Contract Warning */
.cancel-main-warning {
    display: none;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: #fff3cd;
    border: 1px solid #f0ad4e;
    border-radius: 8px;
    margin-top: 0.75rem;
    color: #856404;
    font-size: 0.875rem;
}

.cancel-main-warning.visible {
    display: flex;
}

.cancel-main-warning svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

/* Domain Items */
.cancel-item--domain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.cancel-domain-header {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.025em;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 0.5rem;
}

.cancel-domain-col-kk {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.cancel-domain-col-kk svg {
    width: 14px;
    height: 14px;
    cursor: help;
}

.checkbox-label--kk {
    flex-shrink: 0;
}

.kk-label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.cancel-domain-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.cancel-domain-hint svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-top: 0.125rem;
}

/* Reason Grid */
.cancel-reason-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}

.cancel-reason-option {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    padding: 0.75rem 1rem;
    background: #fafbfc;
    border: 2px solid #e9ecef;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.cancel-reason-option:hover {
    border-color: var(--color-primary);
    background: #fff;
}

.cancel-reason-option input {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.cancel-reason-option:has(input:checked) {
    border-color: var(--color-primary);
    background: #e7f1fa;
}

.cancel-reason-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.cancel-reason-card svg {
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
}

.cancel-reason-other {
    display: none;
    margin-top: 1rem;
}

.cancel-reason-other.visible {
    display: block;
}

/* Summary */
.cancel-summary {
    background: #fafbfc;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.cancel-summary-empty {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

.cancel-summary-empty svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.cancel-summary-content {
    display: none;
}

.cancel-summary-content h4 {
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    color: var(--color-text);
}

.cancel-summary-content ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

.cancel-summary-content li {
    margin-bottom: 0.375rem;
}

.cancel-summary-content .summary-main {
    color: #856404;
}

.cancel-summary-content .summary-kk {
    color: var(--color-primary);
    font-size: 0.8125rem;
}

/* Confirm Checkbox */
.cancel-confirm {
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 8px;
}

.checkbox-label--confirm {
    font-weight: 500;
}

/* Sticky Actions */
.form-actions--sticky {
    position: sticky;
    bottom: 0;
    background: #fff;
    padding: 1rem 1.5rem;
    margin: 0 -1.5rem -1.5rem -1.5rem;
    border-top: 1px solid #e9ecef;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08);
    border-radius: 0 0 12px 12px;
}

/* Badge Muted */
.badge-muted {
    background: #e9ecef;
    color: #6c757d;
}

/* Responsive */
@media (max-width: 640px) {
    .cancel-contract-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .cancel-contract-meta {
        justify-content: center;
    }

    .cancel-contract-includes {
        justify-content: center;
    }

    .cancel-item--domain {
        flex-direction: column;
        align-items: stretch;
    }

    .cancel-domain-header {
        display: none;
    }

    .checkbox-label--kk {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px dashed #e9ecef;
    }

    .cancel-reason-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================================
   PROGRESS BAR
   For showing usage percentages (TeamSpeak, quota, etc.)
   ============================================================================ */

.progress-bar {
    height: 20px;
    background: var(--color-bs-gray-200);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.progress-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.progress-bar--success {
    background: var(--color-success);
}

.progress-bar--warning {
    background: var(--color-warning);
}

.progress-bar--error {
    background: var(--color-error);
}

/* ============================================================================
   LEGACY TABLE REPLACEMENT
   For old table-based layouts in customer area
   ============================================================================ */

/* Radio option table (for vertrag-verwalten, etc.) */
.option-box {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-300);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.option-box-header {
    background: var(--color-bs-gray-100);
    padding: 1rem 1.25rem;
    font-weight: 700;
    border-bottom: 1px solid var(--color-bs-gray-300);
}

.option-box-item {
    padding: 0;
    border-bottom: 1px solid var(--color-bs-gray-200);
}

.option-box-item:last-child {
    border-bottom: none;
}

.option-box-item label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
    padding: 1rem 1.25rem;
    transition: background-color 150ms ease;
}

.option-box-item label:hover {
    background-color: rgba(11, 101, 174, 0.03);
}

.option-box-footer {
    padding: 1rem 1.25rem;
    background: var(--color-bs-gray-50);
    text-align: right;
}

/* ============================================================================
   CONFIG CARDS - Contract Configuration Display
   ============================================================================ */

.config-card {
    background: var(--color-white);
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 8px;
    margin-bottom: 1.5rem;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.config-card-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.config-card-header strong {
    font-size: 1.1rem;
    font-weight: 600;
}

.config-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.config-card-header .filter-input {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    outline: none;
    width: 180px;
}

.config-card-header .filter-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.config-card-header .filter-input:focus {
    background: rgba(255, 255, 255, 0.25);
}

.config-card-artnr {
    font-size: 0.8rem;
    opacity: 0.75;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    white-space: nowrap;
}

.config-card-body {
    padding: 0;
}

.config-card-empty {
    padding: 1rem 1.25rem;
    margin: 0;
}

.config-card-footer {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-bs-gray-200);
    background: var(--color-bs-gray-50);
}

.config-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.config-item {
    display: flex;
    flex-direction: column;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--color-bs-gray-100);
    gap: 0.25rem;
}

.config-item:last-child {
    border-bottom: none;
}

.config-item-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-bs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.config-item-value {
    font-size: 0.95rem;
    color: var(--color-bs-gray-800);
    word-break: break-word;
}

.config-item-value code {
    background: var(--color-bs-gray-100);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.9em;
}

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

.config-item-value a:hover {
    text-decoration: underline;
}

.config-item--copyable {
    position: relative;
}

.config-item--copyable .config-item-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.config-copy-btn {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--color-bs-gray-400);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.config-copy-btn:hover {
    color: var(--color-primary);
    background: var(--color-bs-gray-100);
}

.config-copy-btn svg {
    width: 16px;
    height: 16px;
}

.config-copy-btn.copied {
    color: var(--color-success, #28a745);
}

.config-section {
    border-top: 1px solid var(--color-bs-gray-200);
}

.config-section:first-child {
    border-top: none;
}

.config-section-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-bs-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.75rem 1.25rem 0.5rem;
    background: var(--color-bs-gray-50);
    margin: 0;
}

.config-item--highlight {
    background: rgba(11, 101, 174, 0.04);
}

.config-item--action .config-item-value a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.15s ease;
}

.config-item--action .config-item-value a:hover {
    background: var(--color-primary-dark, #094d8a);
    text-decoration: none;
}

.config-item-value svg {
    width: 14px;
    height: 14px;
    vertical-align: middle;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .config-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .config-item {
        border-right: 1px solid var(--color-bs-gray-100);
    }

    .config-item:nth-child(2n) {
        border-right: none;
    }

    .config-item--full {
        grid-column: 1 / -1;
        border-right: none;
    }

    .config-card-header {
        padding: 1rem 1.5rem;
    }

    .config-item {
        padding: 1rem 1.5rem;
    }

    .config-section-title {
        padding: 0.75rem 1.5rem 0.5rem;
    }
}

/* ============================================================================
   DOMAIN CHECK WIDGET - Homepage
   ============================================================================ */

.domain-widget {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin: 0;
}

.domain-widget-form {
    margin: 0;
}

.domain-widget-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.domain-widget-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.domain-widget-icon svg {
    width: 22px;
    height: 22px;
    stroke: #ffffff;
}

.domain-widget-content {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.domain-widget-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.domain-widget-input-group {
    display: flex;
    align-items: stretch;
    flex: 1;
    min-width: 280px;
}

.domain-widget-input-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    background: #ffffff;
    border: 2px solid #d1d5db;
    border-right: none;
    border-radius: 8px 0 0 8px;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.domain-widget-input-wrap:focus-within {
    border-color: var(--color-primary);
}

.domain-widget-prefix {
    padding: 0 0 0 0.875rem;
    color: #6b7280;
    font-size: 0.9375rem;
    user-select: none;
}

.domain-widget-input,
.domain-widget-input-wrap input[type="text"].domain-widget-input {
    flex: 1;
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 0.75rem 0.5rem;
    font-size: 0.9375rem;
    outline: none;
    min-width: 120px;
    min-height: auto;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    transition: none;
}

.domain-widget-input:hover,
.domain-widget-input:focus,
.domain-widget-input:active,
.domain-widget-input-wrap input[type="text"].domain-widget-input:hover,
.domain-widget-input-wrap input[type="text"].domain-widget-input:focus,
.domain-widget-input-wrap input[type="text"].domain-widget-input:active {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
}

.domain-widget-input::placeholder {
    color: #9ca3af;
}

.domain-widget-select {
    padding: 0.75rem 1rem;
    background: #ffffff;
    border: 2px solid #d1d5db;
    border-left: none;
    border-right: none;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    cursor: pointer;
    outline: none;
    width: auto;
    flex: 0 0 auto;
}

.domain-widget-select:focus {
    border-color: #d1d5db;
    border-top-color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.domain-widget-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--color-primary);
    color: #ffffff;
    border: 2px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease;
    white-space: nowrap;
}

.domain-widget-btn:hover {
    background: #094d85;
    border-color: #094d85;
}

.domain-widget-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

.domain-widget-btn.loading {
    pointer-events: none;
    opacity: 0.85;
    cursor: wait;
}

.domain-widget-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: domain-spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 0.25rem;
}

.domain-widget-hint {
    display: none;
    font-size: 0.8125rem;
    margin-top: 0.5rem;
    padding-left: 0.25rem;
}

.domain-widget-hint .hint-success {
    color: #059669;
}

.domain-widget-hint .hint-info {
    color: #6b7280;
}

.domain-widget-hint .hint-error {
    color: #dc2626;
}

.domain-widget-hint strong {
    font-weight: 600;
}

@keyframes domain-spin {
    to { transform: rotate(360deg); }
}

@media (max-width: 768px) {
    .domain-widget {
        padding: 1rem;
    }

    .domain-widget-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .domain-widget-icon {
        display: none;
    }

    .domain-widget-content {
        flex-direction: column;
        align-items: stretch;
    }

    .domain-widget-label {
        text-align: center;
    }

    .domain-widget-input-group {
        min-width: 100%;
        flex-direction: column;
    }

    .domain-widget-input-wrap {
        border: 2px solid #d1d5db;
        border-radius: 8px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .domain-widget-select {
        border: 2px solid #d1d5db;
        border-top: none;
        border-radius: 0;
    }

    .domain-widget-btn {
        border-radius: 0 0 8px 8px;
        justify-content: center;
    }
}

/* ============================================================================
   ACTIONS SECTION - Form action buttons (Domainauswahl, etc.)
   ============================================================================ */

/**
 * Actions section with buttons
 * Responsive layout: side-by-side on desktop, stacked on mobile
 */
.actions-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.actions-section > div {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Mobile: Stack buttons vertically */
@media (max-width: 768px) {
    .actions-section {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-section > div {
        flex-direction: column;
        width: 100%;
    }

    .actions-section .btn,
    .actions-section button,
    .actions-section a.btn {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        text-align: center;
        justify-content: center;
        white-space: normal;
        padding: 0.875rem 1rem;
    }
}

/* ============================================================================
   PRODUCT NAVIGATION - Tab navigation between product variants
   Used for Microsoft 365 Business/Enterprise switching
   ============================================================================ */

.product-nav {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    width: fit-content;
    margin: 2rem auto;
    padding: 0.5rem;
    background: var(--color-bs-gray-100);
    border-radius: 12px;
    flex-wrap: wrap;
}

.product-nav-item {
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    color: var(--color-text-secondary);
    background: transparent;
    transition: all 200ms ease;
    white-space: nowrap;
}

.product-nav-item:hover {
    color: var(--color-primary);
    background: var(--color-white);
}

.product-nav-item.active {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 2px 8px rgba(11, 101, 174, 0.25);
}

@media (max-width: 480px) {
    .product-nav {
        width: 100%;
        flex-direction: column;
        padding: 0.375rem;
    }

    .product-nav-item {
        text-align: center;
        padding: 0.75rem 1rem;
    }
}

/* ============================================================================
   TOGGLE CONTAINER - Toggle buttons for Teams/NoTeams variants
   ============================================================================ */

.toggle-container {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.5rem 0 2rem 0;
    flex-wrap: wrap;
}

.toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border: 2px solid var(--color-bs-gray-300);
    border-radius: 8px;
    background: var(--color-white);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 200ms ease;
}

.toggle-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.toggle-btn.active {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}

.toggle-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .toggle-container {
        flex-direction: column;
    }

    .toggle-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================================
   M365 PRICING CARDS - Modern pricing card layout for Microsoft 365
   Note: Grid layout now uses unified .pricing-grid--cols-* classes
   ============================================================================ */

.pricing-card .pricing-header {
    text-align: center;
    margin-bottom: 1rem;
}

.pricing-card .pricing-header h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 0.25rem 0;
}

.pricing-card .pricing-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
}

.pricing-card .pricing-price {
    text-align: center;
    margin: 1rem 0 0.5rem 0;
}

.pricing-card .price-amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.pricing-card .price-currency {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-left: 0.25rem;
}

.pricing-card .price-period {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.pricing-card .pricing-vat {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin: 0 0 1rem 0;
}

.pricing-card ul.pricing-features {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
}

.pricing-card ul.pricing-features li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.75rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-bs-gray-100);
}

.pricing-card ul.pricing-features li:last-child {
    border-bottom: none;
}

.pricing-card ul.pricing-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b65ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Featured card styling */
.pricing-card.featured {
    border-color: var(--color-primary);
    box-shadow: 0 4px 20px rgba(11, 101, 174, 0.15);
    transform: scale(1.02);
}

.pricing-card.featured .pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    padding: 0.375rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 900px) {
    .pricing-card.featured {
        transform: none;
    }
}

/* ============================================================================
   DETAILS SECTION - Grid layout for service details
   ============================================================================ */

.details-section {
    background: var(--color-bs-gray-50);
    border-radius: 16px;
    padding: 3rem 2rem;
    margin: 3rem 0;
}

.details-section h2 {
    margin-bottom: 2rem;
}

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

.detail-item {
    background: var(--color-white);
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid var(--color-bs-gray-200);
}

.detail-item h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 0.5rem 0;
}

.detail-item p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

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

.detail-item a:hover {
    text-decoration: underline;
}

/* Full-width detail item spanning all columns */
.detail-item--full {
    grid-column: 1 / -1;
}

.detail-item--full .details-group {
    margin-top: 1rem;
}

.detail-item--full .details-group summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0.75rem 1rem;
    background: var(--color-bs-gray-100);
    border-radius: 8px;
    transition: background-color 0.2s ease;
    list-style: none;
}

.detail-item--full .details-group summary::-webkit-details-marker {
    display: none;
}

.detail-item--full .details-group summary::before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230b65ae' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.detail-item--full .details-group[open] summary::before {
    transform: rotate(180deg);
}

.detail-item--full .details-group summary:hover {
    background: var(--color-bs-gray-200);
}

.detail-item--full .details-content {
    padding: 1rem 1.25rem 0 1.25rem;
    margin-top: 0.5rem;
}

.detail-item--full .details-content ol {
    margin: 0.5rem 0 1rem 1.25rem;
    padding: 0;
}

.detail-item--full .details-content ol li {
    margin-bottom: 0.25rem;
}

.detail-item--full .details-content p {
    margin-bottom: 0.75rem;
}

.detail-item--full .details-content p:last-child {
    margin-bottom: 0;
}

/* Single document grid centering */
.document-grid--single {
    max-width: 500px;
}

@media (max-width: 768px) {
    .details-section {
        padding: 2rem 1.5rem;
    }

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

/* ============================================================================
   EXCHANGE PRICING GRID
   Note: Now uses unified .pricing-grid--cols-2 class
   ============================================================================ */

/* ============================================================================
   COMPARISON TABLE - Simple comparison table for product lines
   ============================================================================ */

.comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.comparison-table th,
.comparison-table td {
    padding: 1rem 1.25rem;
    text-align: left;
    border-bottom: 1px solid var(--color-bs-gray-100);
}

.comparison-table thead th {
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    font-size: 0.9375rem;
}

.comparison-table thead th:first-child {
    text-align: left;
    width: 40%;
}

.comparison-table thead th:not(:first-child) {
    text-align: center;
    width: 30%;
}

.comparison-table tbody td {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.comparison-table tbody td:first-child {
    font-weight: 500;
    color: var(--color-text-primary);
}

.comparison-table tbody td:not(:first-child) {
    text-align: center;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-table tbody tr:hover {
    background: var(--color-bs-gray-50);
}

@media (max-width: 600px) {
    .comparison-table th,
    .comparison-table td {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

/* ============================================================================
   LOGOUT PAGE
   Success page after user logout with hero section and countdown redirect
   ============================================================================ */

.logout-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.logout-hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, #084675 100%);
    color: var(--color-white);
    padding: 3rem 2rem;
    border-radius: 16px;
    text-align: center;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(11, 101, 174, 0.2);
}

.logout-hero-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.logout-hero-icon svg {
    width: 48px;
    height: 48px;
    color: var(--color-white);
}

.logout-hero h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: var(--color-white);
}

.logout-hero p {
    font-size: 1.2rem;
    margin: 0;
    opacity: 0.95;
}

.logout-content {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    text-align: center;
}

.logout-button-container {
    margin: 2rem 0;
}

.logout-button {
    background: var(--color-primary);
    color: var(--color-white) !important;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    font-family: inherit;
    text-shadow: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.logout-button:hover {
    background: var(--color-primary-dark);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.3);
    color: var(--color-white) !important;
    text-decoration: none;
}

.logout-button:visited,
.logout-button:link {
    color: var(--color-white) !important;
    text-decoration: none;
}

.logout-countdown {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.logout-countdown-number {
    display: inline-block;
    min-width: 24px;
    font-weight: 700;
    color: var(--color-primary);
}

.logout-benefits {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--color-bs-gray-100);
    border-radius: 12px;
}

.logout-benefits h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 1rem 0;
}

.logout-benefits ul {
    margin: 0;
    padding-left: 1.5rem;
    color: var(--color-text-secondary);
    text-align: left;
}

.logout-benefits ul li {
    margin-bottom: 0.5rem;
    line-height: 1.6;
}

@media (max-width: 768px) {
    .logout-hero h1 {
        font-size: 1.75rem;
    }

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

    .logout-content {
        padding: 2rem 1.5rem;
    }

    .logout-hero-icon {
        width: 64px;
        height: 64px;
    }

    .logout-hero-icon svg {
        width: 38px;
        height: 38px;
    }
}

/* ============================================================================
   DOMAIN SELECTION PAGE
   Order flow page for selecting/confirming domains during checkout
   ============================================================================ */

.domain-selection-container {
    max-width: 1200px;
}

.domain-selection-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    padding: 2rem;
}

.domain-selection-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, #084675 100%);
    color: var(--color-white);
    padding: 1.5rem 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.domain-selection-body {
    padding: 2rem;
}

@media (max-width: 768px) {
    .domain-selection-card {
        padding: 1.5rem;
    }
}

.domain-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.domain-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-bs-gray-100);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    transition: all 150ms ease;
    cursor: pointer;
    user-select: none;
}

.domain-item:hover {
    background: var(--color-white);
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(11, 101, 174, 0.1);
}

.domain-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.domain-item-content {
    flex: 1;
    font-size: 1rem;
    color: var(--color-text-primary);
}

.domain-name {
    font-weight: 600;
    color: var(--color-primary);
}

.domain-type {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin-left: 0.5rem;
}

.info-box-domain {
    background: #e7f3ff;
    border-left: 4px solid var(--color-primary);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    line-height: 1.6;
    color: var(--color-text-primary);
}

.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--color-text-muted);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.3;
}

@media (max-width: 768px) {
    .domain-selection-body {
        padding: 1.5rem;
    }

    .domain-item {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* Domain Selection Enhanced - Summary Bar */
.domain-summary-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.domain-summary-count {
    font-size: 1.125rem;
    color: var(--color-text-primary);
}

.domain-summary-count strong {
    font-size: 1.5rem;
    color: var(--color-primary);
}

.domain-summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.type-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.type-badge--reg {
    background: #dcfce7;
    color: #15803d;
}

.type-badge--kk {
    background: #dbeafe;
    color: #1d4ed8;
}

.type-badge--na {
    background: #fef3c7;
    color: #b45309;
}

/* Domain List Enhanced */
.domain-list-enhanced {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.domain-item-enhanced {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 10px;
    transition: all 150ms ease;
    cursor: pointer;
    user-select: none;
}

.domain-item-enhanced:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.1);
}

.domain-item-enhanced input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.domain-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.domain-type-icon {
    width: 20px;
    height: 20px;
}

/* Domain Item Type Variants */
.domain-item--reg {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.domain-item--reg .domain-item-icon {
    background: #dcfce7;
    color: #16a34a;
}

.domain-item--reg:hover {
    border-color: #22c55e;
}

.domain-item--kk {
    border-color: #bfdbfe;
    background: linear-gradient(135deg, #eff6ff 0%, #ffffff 100%);
}

.domain-item--kk .domain-item-icon {
    background: #dbeafe;
    color: #2563eb;
}

.domain-item--kk:hover {
    border-color: #3b82f6;
}

.domain-item--na {
    border-color: #fde68a;
    background: linear-gradient(135deg, #fffbeb 0%, #ffffff 100%);
}

.domain-item--na .domain-item-icon {
    background: #fef3c7;
    color: #d97706;
}

.domain-item--na:hover {
    border-color: #f59e0b;
}

/* Unchecked state - visual feedback for deselected domains */
.domain-item--unchecked {
    opacity: 0.5;
    background: #f8f9fa;
    border-color: #dee2e6;
    text-decoration: line-through;
}

.domain-item--unchecked:hover {
    opacity: 0.7;
    border-color: #adb5bd;
}

.domain-item--unchecked .domain-item-icon {
    background: #e9ecef;
    color: #6c757d;
}

.domain-item--unchecked .domain-item-name {
    color: #6c757d;
}

/* Domain Item Details */
.domain-item-details {
    flex: 1;
    min-width: 0;
}

.domain-item-name {
    display: block;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-text-primary);
    word-break: break-all;
}

.domain-item-desc {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 0.125rem;
}

.domain-item-type-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    white-space: nowrap;
    background: var(--color-bs-gray-200);
    color: var(--color-text-muted);
}

.domain-item--reg .domain-item-type-badge {
    background: #dcfce7;
    color: #15803d;
}

.domain-item--kk .domain-item-type-badge {
    background: #dbeafe;
    color: #1d4ed8;
}

.domain-item--na .domain-item-type-badge {
    background: #fef3c7;
    color: #b45309;
}

.domain-item-price {
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Domain Selection Hint */
.domain-selection-hint {
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.domain-selection-hint p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Domain Selection Actions */
.domain-selection-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border);
}

.actions-left {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Button Outline Style */
.btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background: #ffffff;
    border: 2px solid var(--color-bs-gray-300);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-secondary-dark);
    text-decoration: none;
    cursor: pointer;
    transition: all 150ms ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn-outline:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: #f8fafc;
    box-shadow: 0 2px 4px rgba(11, 101, 174, 0.1);
}

/* Large Button */
.btn-lg {
    padding: 0.875rem 2rem;
    font-size: 1rem;
}

/* Empty State Enhanced */
.empty-state h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--color-text-primary);
}

.empty-state p {
    margin: 0 0 1.5rem 0;
    font-size: 1rem;
}

.empty-state-icon svg {
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    color: var(--color-text-muted);
    opacity: 0.4;
}

/* Domain Selection Responsive */
@media (max-width: 768px) {
    .domain-summary-bar {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .domain-item-enhanced {
        flex-wrap: wrap;
        padding: 1rem;
    }

    .domain-item-icon {
        width: 32px;
        height: 32px;
    }

    .domain-type-icon {
        width: 16px;
        height: 16px;
    }

    .domain-item-name {
        font-size: 1rem;
    }

    .domain-item-type-badge {
        display: none;
    }

    .domain-item-price {
        width: 100%;
        text-align: center;
        margin-top: 0.75rem;
    }

    .domain-selection-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .actions-left {
        justify-content: stretch;
    }

    .actions-left .btn-outline {
        flex: 1;
        text-align: center;
    }

    .btn-lg {
        width: 100%;
    }
}

/* ============================================================================
   DOMAIN POLICIES PAGE
   TLD registration policies with card-based layout
   ============================================================================ */

/* TLD Grid and Cards */
.tld-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.tld-card {
    background: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    transition: all 150ms ease;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tld-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(11, 101, 174, 0.1);
}

.tld-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tld-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #084675 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tld-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-white);
}

.tld-domain {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.tld-links {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tld-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-bs-gray-100);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    transition: all 150ms ease;
    line-height: 1.4;
}

.tld-link:hover {
    background: var(--color-border);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.tld-link svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .tld-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .tld-card {
        padding: 1.5rem;
    }
}

/* ============================================================================
   DOMAIN CHECK PAGE
   Domain availability checker with search form, TLD selection, and results
   ============================================================================ */

.domain-check-container {
    max-width: 1200px;
}

.domain-check-container .intro-text {
    margin-top: 0;
}

/* Domain Search Box - Hero section with gradient */
.domain-search-box {
    background: linear-gradient(135deg, var(--color-primary) 0%, #084675 100%);
    padding: 3rem 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(11, 101, 174, 0.2);
}

.domain-search-box h2 {
    color: var(--color-white);
    margin: 0 0 1.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.domain-search-form {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
}

.domain-search-prefix {
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 500;
}

.domain-search-input {
    flex: 1;
    min-width: 280px;
    height: 52px;
    padding: 0 1.25rem;
    font-size: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    transition: all 150ms ease;
}

.domain-search-input:focus {
    outline: none;
    border-color: var(--color-white);
    background: var(--color-white);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.domain-search-submit {
    height: 52px;
    padding: 0 2rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-white);
    border: 2px solid var(--color-white);
    border-radius: 8px;
    cursor: pointer;
    transition: all 150ms ease;
    white-space: nowrap;
}

.domain-search-submit:hover {
    background: #f0f0f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.domain-search-hint {
    margin-top: 1rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    display: none;
}

.domain-search-hint .hint-success {
    color: #86efac;
}

.domain-search-hint .hint-info {
    color: rgba(255, 255, 255, 0.8);
}

.domain-search-hint .hint-error {
    color: #fca5a5;
}

.domain-search-submit.btn-disabled,
.domain-search-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.domain-search-submit.loading {
    pointer-events: none;
    opacity: 0.8;
    position: relative;
    color: transparent !important;
    cursor: wait;
}

.domain-search-submit.loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    border: 3px solid rgba(11, 101, 174, 0.2);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: domain-spinner 0.8s linear infinite;
}

@keyframes domain-spinner {
    to { transform: rotate(360deg); }
}

/* TLD Selection Box */
.tld-selection {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.tld-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.tld-selection h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-primary);
}

.tld-quick-actions {
    display: flex;
    gap: 0.5rem;
}

.tld-quick-btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    cursor: pointer;
    transition: all 150ms ease;
}

.tld-quick-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* TLD Grid for checkboxes */
.tld-grid-popular,
.tld-grid-other {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.tld-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.625rem;
    background: var(--color-bs-gray-100);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 150ms ease;
    user-select: none;
}

.tld-checkbox:hover {
    background: #e7f3ff;
    border-color: var(--color-primary);
}

.tld-checkbox input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
    margin: 0;
    accent-color: var(--color-primary);
}

.tld-checkbox:has(input:checked) {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.tld-checkbox:has(input:checked) .tld-label {
    color: var(--color-white);
    font-weight: 600;
}

.tld-checkbox:has(input:checked) input[type="checkbox"] {
    accent-color: var(--color-white);
}

.tld-checkbox.popular {
    background: #e7f3ff;
    border-color: #a8d4ff;
}

.tld-label {
    font-weight: 500;
    font-size: 0.8125rem;
}

/* Domain Results */
.domain-results {
    background: var(--color-white);
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.domain-result-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    transition: all 150ms ease;
    cursor: pointer;
    user-select: none;
}

.domain-result-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(11, 101, 174, 0.1);
    background: #f8fafc;
}

.domain-result-item--disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.domain-result-item--disabled:hover {
    border-color: var(--color-border);
    box-shadow: none;
    background: transparent;
}

.domain-result-item input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    cursor: pointer;
}

.domain-result-content {
    flex: 1;
}

.domain-result-name {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.domain-result-name.available {
    color: #16a34a;
}

.domain-result-name.taken {
    color: #dc2626;
}

.domain-result-name.unknown {
    color: #f59e0b;
}

.domain-result-description {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Error message for domain check */
.error-message {
    background: #fef2f2;
    border: 2px solid #fecaca;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-bottom: 2rem;
    color: #dc2626;
    font-weight: 600;
}

.form-actions-domain {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    align-items: center;
    margin-top: 2rem;
}

/* Domain Results Header with Summary */
.domain-results-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-border);
}

.domain-results-header h2 {
    margin: 0;
}

.domain-results-summary {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.summary-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.875rem;
    border-radius: 100px;
    font-size: 0.875rem;
    font-weight: 600;
}

.summary-badge--available {
    background: #dcfce7;
    color: #15803d;
}

.summary-badge--taken {
    background: #fee2e2;
    color: #b91c1c;
}

.summary-badge--error {
    background: #fef3c7;
    color: #b45309;
}

/* Result Status Icon Container */
.result-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
}

.result-status--available {
    background: #dcfce7;
    color: #16a34a;
}

.result-status--taken {
    background: #fee2e2;
    color: #dc2626;
}

.result-status--unknown {
    background: #fef3c7;
    color: #d97706;
}

.result-status--error {
    background: #f3f4f6;
    color: #6b7280;
}

.result-status-icon {
    width: 20px;
    height: 20px;
}

/* Domain Result Item Status Variants */
.domain-result-item--available {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.domain-result-item--available:hover {
    border-color: #22c55e;
    background: linear-gradient(135deg, #dcfce7 0%, #ffffff 100%);
}

.domain-result-item--taken {
    border-color: var(--color-border);
    background: #fafafa;
}

.domain-result-item--taken:hover {
    border-color: #94a3b8;
    background: #f5f5f5;
}

.domain-result-item--unknown {
    border-color: #fde68a;
    background: #fffbeb;
}

.domain-result-item--unknown:hover {
    border-color: #f59e0b;
    background: #fef3c7;
}

/* Domain Result Status Text */
.domain-result-status-text {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

/* Domain Price Display */
.domain-price {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: white;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    margin-left: auto;
}

.domain-result-item--taken .domain-price,
.domain-result-item--unknown .domain-price {
    background: #64748b;
}

/* Button with Icon */
.btn-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-icon-svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .domain-search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .domain-search-input {
        min-width: 100%;
    }

    .domain-search-submit {
        width: 100%;
    }

    .tld-grid-popular,
    .tld-grid-other {
        grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    }

    .form-actions-domain {
        flex-direction: column;
        align-items: stretch;
    }

    /* Domain Results Responsive */
    .domain-results-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .domain-result-item {
        flex-wrap: wrap;
        padding: 1rem;
    }

    .result-status {
        width: 32px;
        height: 32px;
    }

    .result-status-icon {
        width: 16px;
        height: 16px;
    }

    .domain-result-name {
        font-size: 1rem;
    }

    .domain-price {
        width: 100%;
        justify-content: center;
        margin-top: 0.75rem;
        margin-left: 0;
    }

    .btn-with-icon {
        justify-content: center;
    }
}

/* ==========================================================================
   Addon Domain Order Form (addon_domain.php)
   Multi-step domain registration/transfer workflow
   ========================================================================== */

/* Progress Steps - Horizontal step indicator */
.progress-steps {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 1;
    max-width: 150px;
}

.progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px;
    left: calc(50% + 20px);
    width: calc(100% - 40px);
    height: 2px;
    background: var(--color-border, #e9ecef);
}

.progress-step.completed:not(:last-child)::after {
    background: var(--color-primary, #0b65ae);
}

.progress-step .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-border, #e9ecef);
    color: var(--color-text-muted, #6c757d);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.progress-step.active .step-number {
    background: var(--color-primary, #0b65ae);
    color: white;
}

.progress-step.completed .step-number {
    background: var(--color-success, #198754);
    color: white;
}

.progress-step .step-label {
    margin-top: 0.5rem;
    font-size: 12px;
    color: var(--color-text-muted, #6c757d);
    text-align: center;
}

.progress-step.active .step-label,
.progress-step.completed .step-label {
    color: var(--color-text, #494c53);
    font-weight: 500;
}

/* Auth Card Wide Variant */
.auth-card--wide {
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* Inline Input Group (input + select + button in one row) */
.input-inline {
    display: flex;
    align-items: stretch;
    background: var(--color-bg-light, #f4f5f7);
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
    height: 52px;
    box-sizing: border-box;
}

.input-inline:focus-within {
    border-color: var(--color-primary, #0b65ae);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

.input-inline .form-input {
    border: none;
    background: transparent;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    height: 100%;
}

.input-inline .form-input:focus {
    box-shadow: none;
}

.input-inline .btn {
    border-radius: 0 6px 6px 0;
    white-space: nowrap;
    margin: 0;
    align-self: stretch;
    display: flex;
    align-items: center;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* Input Addon (text prefix/suffix) */
.input-addon {
    padding: 0 0.5rem 0 1rem;
    color: var(--color-text-muted, #6c757d);
    font-size: 1rem;
    display: flex;
    align-items: center;
}

/* Form Input Auto Width - higher specificity to override .auth-form .form-input */
.form-input--auto,
.auth-form .form-input--auto,
.input-inline .form-input--auto {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
}

/* Text Utilities */
.text-sm { font-size: 0.875rem; }
.text-error { color: var(--color-error, #dc3545); }
.text-warning { color: var(--color-warning-text, #856404); }

/* Input Inline Responsive */
@media (max-width: 600px) {
    .input-inline {
        flex-wrap: wrap;
    }

    .input-inline .input-addon {
        padding: 0.75rem 0 0 1rem;
    }

    .input-inline .form-input {
        flex: 1;
        min-width: 100px;
    }

    .input-inline .form-input--auto {
        width: 40%;
        border-top: 1px solid var(--color-border, #e9ecef);
    }

    .input-inline .btn {
        width: 60%;
        justify-content: center;
        border-radius: 0 0 6px 0;
    }
}

/* Domain Result Status Cards */
.domain-result {
    text-align: center;
    padding: 2rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.domain-result--available {
    background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
}

.domain-result--taken {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
}

.domain-result--error {
    background: linear-gradient(135deg, #f8d7da 0%, #f5c2c7 100%);
}

.domain-result--success {
    background: linear-gradient(135deg, #d1e7dd 0%, #badbcc 100%);
}

.domain-result .result-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
}

.domain-result--available .result-icon,
.domain-result--success .result-icon {
    color: var(--color-success, #198754);
}

.domain-result--taken .result-icon {
    color: var(--color-warning-text, #856404);
}

.domain-result--error .result-icon {
    color: var(--color-error, #dc3545);
}

.domain-result h2 {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
}

.domain-result .domain-name {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: monospace;
    margin: 0.5rem 0;
}

/* Order Form */
.order-form {
    max-width: 500px;
    margin: 0 auto;
}

.order-details {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.order-pricing {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.order-pricing .price-item {
    display: flex;
    flex-direction: column;
}

.order-pricing .price-label {
    font-size: 12px;
    color: var(--color-text-muted, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.order-pricing .price-value {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text, #494c53);
}

.order-terms {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border, #e9ecef);
    font-size: 13px;
    color: var(--color-text-muted, #6c757d);
}

.order-terms p {
    margin: 0;
}

/* Transfer Confirm */
.transfer-confirm {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.checkbox-label {
    display: flex;
    gap: 0.75rem;
    cursor: pointer;
}

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

.checkbox-text {
    font-size: 14px;
    line-height: 1.5;
}

/* Button Large Variant */
.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.125rem;
}

/* Order Form Responsive */
@media (max-width: 600px) {
    .order-pricing {
        grid-template-columns: 1fr;
    }

    .progress-steps {
        gap: 0.5rem;
    }

    .step-label {
        font-size: 10px;
    }
}

/* Addon Domain Form Actions - consistent button spacing */
.order-form .form-actions,
.domain-result + .form-actions,
.domain-result--success + .form-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 480px) {
    .order-form .form-actions,
    .domain-result + .form-actions,
    .domain-result--success + .form-actions {
        flex-direction: column;
    }
}

/* Upgrade Options - Radio Selection Cards */
.upgrade-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.upgrade-option {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: white;
    border: 2px solid var(--color-border, #e9ecef);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.upgrade-option:hover {
    border-color: var(--color-primary, #0b65ae);
}

.upgrade-option:has(input:checked) {
    border-color: var(--color-primary, #0b65ae);
    background: #e7f1fa;
}

.upgrade-option input[type="radio"] {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.upgrade-option-content {
    flex: 1;
    min-width: 0;
}

.upgrade-option-name {
    font-weight: 600;
    color: var(--color-text, #494c53);
    margin-bottom: 0.25rem;
}

.upgrade-option-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    font-size: 13px;
    color: var(--color-text-muted, #6c757d);
}

.upgrade-option-price {
    font-weight: 600;
    color: var(--color-primary, #0b65ae);
}

@media (max-width: 480px) {
    .upgrade-option {
        padding: 0.875rem 1rem;
    }

    .upgrade-option-details {
        flex-direction: column;
        gap: 0.25rem;
    }
}

/* ==========================================================================
   FEEDBACK SYSTEM
   Floating action button and feedback form styles
   ========================================================================== */

/* Floating Action Button - positioned left of chat widget */
.feedback-fab {
    position: fixed;
    bottom: 24px;
    right: 110px;
    width: 56px;
    height: 56px;
    background: var(--color-primary, #0b65ae);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 4px 12px rgba(11, 101, 174, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    z-index: 1000;
    cursor: pointer;
}

.feedback-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(11, 101, 174, 0.45);
    background: var(--color-primary-hover, #094d8a);
    color: white;
}

.feedback-fab:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.3), 0 4px 12px rgba(11, 101, 174, 0.35);
}

.feedback-fab svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .feedback-fab {
        bottom: 16px;
        right: 90px;
        width: 48px;
        height: 48px;
    }

    .feedback-fab svg {
        width: 20px;
        height: 20px;
    }
}

/* Feedback Form Styles */
.feedback-form {
    max-width: 640px;
}

.feedback-form .form-textarea {
    min-height: 150px;
    resize: vertical;
}

.feedback-form .form-input-file {
    padding: 0.75rem;
    border: 2px dashed var(--color-gray-300, #dee2e6);
    border-radius: 8px;
    background: var(--color-bs-gray-100, #f8f9fa);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.feedback-form .form-input-file:hover {
    border-color: var(--color-primary, #0b65ae);
    background: rgba(11, 101, 174, 0.03);
}

.feedback-form .form-input-file:focus {
    outline: none;
    border-color: var(--color-primary, #0b65ae);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

/* Case ID Display */
.feedback-case-id {
    font-size: 1.125rem;
    padding: 0.75rem 1rem;
    background: var(--color-bs-gray-100, #f8f9fa);
    border-radius: 6px;
    margin: 1rem 0;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.feedback-case-id strong {
    color: var(--color-primary, #0b65ae);
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   FEEDBACK MODAL
   Modal dialog for feedback form with screenshot paste support
   ========================================================================== */

/* Modal Overlay */
.feedback-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.feedback-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Container */
.feedback-modal {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 520px;
    max-height: calc(100vh - 2rem);
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.95);
    transition: transform 0.2s ease;
}

.feedback-modal-overlay.active .feedback-modal {
    transform: translateY(0) scale(1);
}

/* Modal Header */
.feedback-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-gray-200, #e9ecef);
}

.feedback-modal-header h2 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text, #494c53);
}

.feedback-modal-close {
    background: none;
    border: none;
    padding: 0.5rem;
    margin: -0.5rem;
    cursor: pointer;
    color: var(--color-gray-500, #6c757d);
    border-radius: 6px;
    transition: background 0.15s ease, color 0.15s ease;
}

.feedback-modal-close:hover {
    background: var(--color-gray-100, #f8f9fa);
    color: var(--color-text, #494c53);
}

.feedback-modal-close svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Modal Body */
.feedback-modal-body {
    padding: 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.feedback-modal-body .form-group {
    margin-bottom: 1rem;
}

.feedback-modal-body .form-group:last-child {
    margin-bottom: 0;
}

.feedback-modal-body .form-textarea {
    min-height: 100px;
    resize: vertical;
}

/* Screenshot Drop Zone */
.feedback-screenshot-drop {
    border: 2px dashed var(--color-gray-300, #dee2e6);
    border-radius: 8px;
    background: var(--color-gray-50, #f8f9fa);
    min-height: 120px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
    position: relative;
}

.feedback-screenshot-drop:hover,
.feedback-screenshot-drop:focus {
    border-color: var(--color-primary, #0b65ae);
    background: rgba(11, 101, 174, 0.03);
    outline: none;
}

.feedback-screenshot-drop.dragover {
    border-color: var(--color-primary, #0b65ae);
    background: rgba(11, 101, 174, 0.08);
    border-style: solid;
}

/* Placeholder */
.feedback-screenshot-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    gap: 0.75rem;
    color: var(--color-gray-500, #6c757d);
    text-align: center;
}

.feedback-screenshot-placeholder svg {
    width: 40px;
    height: 40px;
    opacity: 0.5;
}

.feedback-screenshot-placeholder span {
    font-size: 0.875rem;
}

/* Preview */
.feedback-screenshot-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    position: relative;
}

.feedback-screenshot-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.feedback-screenshot-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: background 0.15s ease;
}

.feedback-screenshot-remove:hover {
    background: rgba(220, 53, 69, 0.9);
}

.feedback-screenshot-remove svg {
    width: 14px;
    height: 14px;
}

/* Modal Footer */
.feedback-modal-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--color-gray-200, #e9ecef);
    background: var(--color-gray-50, #f8f9fa);
    border-radius: 0 0 12px 12px;
}

.feedback-modal-status {
    flex: 1;
    font-size: 0.875rem;
    color: var(--color-gray-600, #6c757d);
}

.feedback-modal-status.sending {
    color: var(--color-primary, #0b65ae);
}

.feedback-modal-status.success {
    color: var(--color-success, #28a745);
}

.feedback-modal-status.success strong {
    font-family: 'SFMono-Regular', Consolas, monospace;
    color: var(--color-primary, #0b65ae);
}

.feedback-modal-status.error {
    color: var(--color-danger, #dc3545);
}

/* Mobile adjustments */
@media (max-width: 576px) {
    .feedback-modal-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .feedback-modal {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 16px 16px 0 0;
    }

    .feedback-modal-header {
        padding: 1rem;
    }

    .feedback-modal-body {
        padding: 1rem;
    }

    .feedback-modal-footer {
        flex-wrap: wrap;
        padding: 1rem;
    }

    .feedback-modal-status {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .feedback-modal-footer .btn {
        flex: 1;
    }
}

/* ============================================================================
   RATING STARS - CSS-based star rating display
   Replaces emoji stars with SVG-based icons
   ============================================================================ */

.rating-stars {
    display: inline-flex;
    gap: 2px;
    color: #f59e0b;
}

.rating-stars .star {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ============================================================================
   EMPTY STATE ICON - Globe icon for domain selection
   ============================================================================ */

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    color: var(--color-gray-400, #9ca3af);
}

.empty-state-icon svg {
    width: 100%;
    height: 100%;
}

.empty-state-hint {
    color: #999;
    font-size: 0.875rem;
}

/* ============================================================================
   M365 TENANT PAGE - Tenant selection form styles
   ============================================================================ */

/* Tenant Input Group */
.tenant-input-group {
    display: flex;
    align-items: center;
    height: 48px;
    border: 2px solid var(--color-bs-gray-300);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--color-bs-gray-100);
    box-sizing: content-box;
    max-width: 400px;
}

.tenant-input-group:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(11, 101, 174, 0.1);
}

.tenant-input-group.has-success {
    border-color: #22c55e;
}

.tenant-input-group.has-exists {
    border-color: #f59e0b;
}

.tenant-input-group.has-error {
    border-color: #ef4444;
}

.tenant-input {
    flex: 1;
    border: none !important;
    padding: 0;
    margin: 0;
    padding-left: 1rem;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    height: 48px;
    background: var(--color-white);
    border-radius: 6px 0 0 6px;
    outline: none !important;
    box-shadow: none !important;
    min-width: 0;
    box-sizing: border-box;
}

.tenant-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.tenant-input-suffix {
    padding: 0 1rem;
    height: 48px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 1rem;
    font-weight: 500;
    line-height: 48px;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Tenant Preview */
.tenant-preview {
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    min-height: 1.25rem;
}

.tenant-preview:not(:empty)::before {
    content: "Domain: ";
    font-weight: 500;
}

.tenant-preview:not(:empty) {
    color: var(--color-primary);
    font-weight: 500;
}

/* Status Messages */
.tenant-status {
    margin-top: 1rem;
}

.status-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
}

.status-message.hidden {
    display: none;
}

.status-message svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.status-idle {
    background: var(--color-bs-gray-50);
    color: var(--color-text-secondary);
}

.status-checking {
    background: var(--color-bs-gray-50);
    color: var(--color-text-secondary);
}

.status-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-bs-gray-300);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: tenant-spin 0.8s linear infinite;
}

@keyframes tenant-spin {
    to { transform: rotate(360deg); }
}

.status-available {
    background: rgba(34, 197, 94, 0.1);
    color: #15803d;
}

.status-available svg {
    stroke: #22c55e;
}

.status-exists {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.status-exists svg {
    stroke: #f59e0b;
}

.status-error {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.status-error svg {
    stroke: #ef4444;
}

/* Existing Tenant Confirmation */
.existing-confirmation {
    margin-top: 1.5rem;
    padding: 1.25rem;
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 8px;
    animation: tenant-slideIn 0.3s ease;
}

.existing-confirmation.hidden {
    display: none;
}

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

/* Custom Checkbox for Tenant */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

.checkbox-custom {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #6b7280;
    border-radius: 4px;
    background: var(--color-white);
    transition: all 0.2s ease;
    position: relative;
}

.checkbox-custom::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}

.checkbox-label input:checked + .checkbox-custom::after {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.checkbox-label input:checked + .checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-label:hover .checkbox-custom {
    border-color: var(--color-primary);
}

.checkbox-text {
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.5;
}

/* Compact Info Box */
.info-box--compact {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    margin-top: 1.5rem;
    font-size: 0.875rem;
}

.info-box--compact svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: var(--color-primary);
    margin-top: 0.125rem;
}

.info-box--compact strong {
    color: var(--color-text);
}

/* Order Actions */
.order-actions {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-bs-gray-200);
}

/* Form Description Padding for Tenant */
.order-form-card .order-form-desc {
    padding: 1rem 1.5rem 0;
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}

/* Status in card */
.order-form-card .tenant-status {
    margin: 1rem 1.5rem 0;
}

.order-form-card .existing-confirmation {
    margin: 1.5rem 1.5rem 0;
}

.order-form-card .info-box--compact {
    margin: 1.5rem 1.5rem;
}

/* Customer Check Section - Radio options for existing/new customer */
.customer-check-section {
    background: #ffffff;
    border: 1px solid var(--color-bs-gray-200);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.customer-check-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 1.25rem 0;
}

.customer-check-title svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.customer-check-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.customer-check-option {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-bs-gray-50);
    border: 2px solid var(--color-bs-gray-200);
    border-radius: 10px;
    cursor: pointer;
    transition: all 150ms ease;
}

.customer-check-option:hover {
    border-color: var(--color-primary-light);
    background: #f8fafc;
}

.customer-check-option:has(input[type="radio"]:checked) {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(11, 101, 174, 0.1);
}

.customer-check-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
    flex-shrink: 0;
}

.customer-check-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    user-select: none;
    line-height: 1.4;
}

.customer-check-option:has(input[type="radio"]:checked) .customer-check-label {
    color: var(--color-primary);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .customer-check-section {
        padding: 1.25rem;
    }

    .customer-check-title {
        font-size: 1rem;
    }

    .customer-check-option {
        padding: 0.875rem 1rem;
    }

    .customer-check-label {
        font-size: 0.9375rem;
    }
}