/*
Theme Name:        Optimierung Premium
Theme URI:         https://msd-webdesign.at
Author:            Optimierung.at — Michael Schöberl
Author URI:        https://msd-webdesign.at
Description:       Premium WordPress-Theme für Webdesign-Agenturen und lokale Dienstleister. Dunkles Signature-Design (Marineblau + Gold) mit verkaufspsychologischem Aufbau, Hell-/Dunkelmodus (WCAG AA), strukturierten Daten (JSON-LD/Schema.org) für SEO und GEO (AI-Suche) sowie Barrierefreiheit nach WCAG 2.1.
Version:           2.1.0
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       optimierung-premium
Tags:              full-width-template, custom-colors, custom-logo, custom-menu, featured-images, footer-widgets, theme-options, translation-ready, blog, portfolio, business, accessibility-ready
*/

/* ==========================================================================
   DESIGN TOKENS — CSS Custom Properties
   ========================================================================== */

:root {
	color-scheme: dark;

	/* --- Brand palette (dunkel = default) --- */
	--opt-blue-darkest:    #0a1428;
	--opt-blue-dark:       #0f1f3c;
	--opt-blue-mid:        #1a3557;
	--opt-blue-accent:     #2a4a7d;
	--opt-blue-bright:     #3d6eb3;
	--opt-blue-light:      #5a9eff;

	--opt-gold:            #c9a84c;
	--opt-gold-light:      #e8c97a;
	--opt-gold-dark:       #a08030;

	--opt-cream:           #f5f0e8;
	--opt-cream-dark:      #e8e0d0;
	--opt-white:           #ffffff;

	/* --- Funktionale Aliase (verhindern Regressions falls Variable umbenannt) --- */
	--opt-bg:              var(--opt-blue-darkest);
	--opt-bg-elev:         var(--opt-blue-dark);
	--opt-bg-elev-2:       var(--opt-blue-mid);
	--opt-text:            var(--opt-cream);
	--opt-text-muted:      rgba(245, 240, 232, 0.72); /* WCAG AA auf dunklem BG */
	--opt-text-faint:      rgba(245, 240, 232, 0.55);

	/* --- Legacy-Aliase (Kompatibilität mit altem Code: '--opt-green-*') --- */
	--opt-green-darkest:   var(--opt-blue-darkest);
	--opt-green-dark:      var(--opt-blue-dark);
	--opt-green-mid:       var(--opt-blue-mid);

	/* --- Border tokens --- */
	--opt-border-gold:     rgba(201, 168, 76, 0.20);
	--opt-border-gold-md:  rgba(201, 168, 76, 0.40);
	--opt-border-gold-lg:  rgba(201, 168, 76, 0.55);

	/* --- Focus ring (WCAG 2.1 — 3:1 contrast minimum) --- */
	--opt-focus-ring:      0 0 0 3px rgba(232, 201, 122, 0.65);
	--opt-focus-color:     var(--opt-gold-light);

	/* --- States (validation, info) --- */
	--opt-success:         #5ac882;
	--opt-success-bg:      rgba(90, 200, 130, 0.10);
	--opt-warning:         #f0b549;
	--opt-warning-bg:      rgba(240, 181, 73, 0.10);
	--opt-danger:          #ff6b6b;
	--opt-danger-bg:       rgba(255, 107, 107, 0.10);
	--opt-info:            var(--opt-gold);
	--opt-info-bg:         rgba(201, 168, 76, 0.07);

	/* --- Typografie --- */
	--opt-font-serif:      'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--opt-font-sans:       'Outfit', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

	/* --- Motion & Geometry --- */
	--opt-transition:      0.25s cubic-bezier(0.4, 0, 0.2, 1);
	--opt-radius:          2px;
	--opt-radius-md:       8px;
	--opt-radius-lg:       16px;

	/* --- Container --- */
	--opt-container:        1200px;
	--opt-container-wide:   1400px;
	--opt-container-narrow: 800px;

	/* --- Spacing scale --- */
	--opt-spacing-xs:   0.5rem;
	--opt-spacing-sm:   1rem;
	--opt-spacing-md:   2rem;
	--opt-spacing-lg:   4rem;
	--opt-spacing-xl:   7rem;
	--opt-spacing-2xl: 10rem;
}

/* ==========================================================================
   LIGHT MODE — WCAG AA Kontrast, gleiches Markenprofil
   Aktiviert per data-theme="light" (Header-Umschalter + System-Preference)
   ========================================================================== */

[data-theme="light"] {
	color-scheme: light;

	/* Hellere Töne, aber Markenfarben bleiben erkennbar */
	--opt-blue-darkest: #f7f4ee;  /* Body BG */
	--opt-blue-dark:    #ffffff;  /* Card BG */
	--opt-blue-mid:     #efe9dd;  /* Secondary section BG */
	--opt-blue-accent:  #ddd2bc;  /* Tertiary */
	--opt-blue-bright:  #1d3a66;  /* Akzent dunkel */
	--opt-blue-light:   #16203a;  /* Headline dunkel */

	--opt-cream:        #16203a;  /* Text primary auf hell */
	--opt-cream-dark:   #26314d;
	--opt-white:        #ffffff;

	/* Dunkleres Gold für ausreichend Kontrast auf hellem Hintergrund (4.5:1) */
	--opt-gold:         #8a6f23;
	--opt-gold-light:   #a08030;
	--opt-gold-dark:    #6e5618;

	--opt-text:         #16203a;
	--opt-text-muted:   rgba(22, 32, 58, 0.78); /* WCAG AA auf hell */
	--opt-text-faint:   rgba(22, 32, 58, 0.55);

	--opt-border-gold:    rgba(138, 111, 35, 0.28);
	--opt-border-gold-md: rgba(138, 111, 35, 0.45);
	--opt-border-gold-lg: rgba(138, 111, 35, 0.60);

	--opt-focus-ring:   0 0 0 3px rgba(138, 111, 35, 0.55);
	--opt-focus-color:  var(--opt-gold-dark);
}

/* Automatische System-Präferenz, wenn der User nichts gesetzt hat */
@media (prefers-color-scheme: light) {
	html:not([data-theme]) {
		--opt-blue-darkest: #f7f4ee;
		--opt-blue-dark:    #ffffff;
		--opt-blue-mid:     #efe9dd;
		--opt-cream:        #16203a;
		--opt-gold:         #8a6f23;
		--opt-text-muted:   rgba(22, 32, 58, 0.78);
	}
}

/* ==========================================================================
   RESET & BASE (modernisiert)
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

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

body {
	background-color: var(--opt-blue-darkest);
	color: var(--opt-cream);
	font-family: var(--opt-font-sans);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.75;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	transition: background-color .3s ease, color .3s ease;
	min-height: 100vh;
	min-height: 100dvh;
}

img,
video,
svg,
picture {
	max-width: 100%;
	height: auto;
	display: block;
}

img {
	font-style: italic; /* Alt-Text wenn Bild fehlt sichtbar machen */
}

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

ul,
ol {
	list-style: none;
}

button,
input,
select,
textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}

button { cursor: pointer; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--opt-font-serif);
	font-weight: 300;
	line-height: 1.15;
	color: var(--opt-cream);
	text-wrap: balance; /* moderne Browser: hübschere Headlines */
}

p { text-wrap: pretty; }

/* ==========================================================================
   GLOBAL FOCUS (WCAG 2.1)
   ========================================================================== */

:where(a, button, input, select, textarea, [tabindex]):focus {
	outline: none;
}
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--opt-focus-color);
	outline-offset: 2px;
	box-shadow: var(--opt-focus-ring);
	border-radius: var(--opt-radius);
}

/* Bei Fett-Buttons keine schwarze Outline-Linie sondern Ring */
.btn:focus-visible,
button.msd-btn--shiny:focus-visible {
	outline: none;
	box-shadow: var(--opt-focus-ring), 0 0 0 1px var(--opt-cream);
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
	background: var(--opt-gold);
	color: var(--opt-blue-darkest);
}

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

.container {
	width: 100%;
	max-width: var(--opt-container);
	margin-inline: auto;
	padding-inline: var(--opt-spacing-lg);
}

.container--wide   { max-width: var(--opt-container-wide); }
.container--narrow { max-width: var(--opt-container-narrow); }

.sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.gold-line {
	width: 60px;
	height: 1px;
	background: var(--opt-gold);
	display: block;
	margin-block: var(--opt-spacing-md);
}

.text-gold   { color: var(--opt-gold); }
.text-muted  { color: var(--opt-text-muted); }
.text-cream  { color: var(--opt-cream); }
.text-center { text-align: center; }
.text-italic { font-style: italic; }

/* ==========================================================================
   TYPOGRAPHY SCALE
   ========================================================================== */

.opt-eyebrow {
	font-family: var(--opt-font-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--opt-gold);
	display: block;
	margin-bottom: 0.75rem;
}

.opt-heading-xl { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.opt-heading-lg { font-size: clamp(2rem, 4vw, 3.5rem); }
.opt-heading-md { font-size: clamp(1.6rem, 3vw, 2.5rem); }
.opt-heading-sm { font-size: 1.5rem; }

.opt-body-lg {
	font-size: 1.05rem;
	color: var(--opt-text-muted);
	line-height: 1.8;
}

.opt-body {
	font-size: 0.95rem;
	color: var(--opt-text-muted);
	line-height: 1.9;
}

.opt-body-sm {
	font-size: 0.84rem;
	color: var(--opt-text-muted);
	line-height: 1.8;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--opt-font-sans);
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
	border: none;
	transition: background var(--opt-transition),
				color var(--opt-transition),
				border-color var(--opt-transition),
				transform var(--opt-transition),
				box-shadow var(--opt-transition);
	text-decoration: none;
	white-space: nowrap;
	border-radius: var(--opt-radius);
	min-height: 44px; /* WCAG 2.5.5 — Touch Target */
}

.btn--primary {
	padding: 1rem 2.2rem;
	background: var(--opt-gold);
	color: var(--opt-blue-darkest);
}

.btn--primary:hover {
	background: var(--opt-gold-light);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(201, 168, 76, 0.25);
}

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

[data-theme="light"] .btn--primary {
	color: #ffffff;
}

.btn--outline {
	padding: 0.9rem 2rem;
	background: transparent;
	color: var(--opt-cream);
	border: 1px solid var(--opt-border-gold-lg);
}

.btn--outline:hover {
	border-color: var(--opt-gold);
	background: rgba(201, 168, 76, 0.07);
	color: var(--opt-gold-light);
}

.btn--ghost {
	padding: 0.9rem 0;
	background: transparent;
	color: var(--opt-gold);
	border-bottom: 1px solid var(--opt-border-gold-lg);
	border-radius: 0;
}

.btn--ghost:hover {
	border-color: var(--opt-gold);
	color: var(--opt-gold-light);
}

.btn--sm { font-size: 0.72rem; padding: 0.65rem 1.4rem; min-height: 36px; }
.btn--lg { font-size: 0.9rem;  padding: 1.2rem 3rem;   min-height: 52px; }

/* Disabled state */
.btn[disabled],
.btn[aria-disabled="true"] {
	opacity: 0.6;
	cursor: not-allowed;
	pointer-events: none;
}

/* ==========================================================================
   BADGES & TAGS
   ========================================================================== */

.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 1rem;
	font-family: var(--opt-font-sans);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

.badge--gold {
	border: 1px solid rgba(201, 168, 76, 0.4);
	color: var(--opt-gold);
}

.badge--solid {
	background: var(--opt-gold);
	color: var(--opt-blue-darkest);
	font-weight: 600;
}

[data-theme="light"] .badge--solid { color: #ffffff; }

.badge--dot::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
	animation: opt-pulse 2s infinite;
}

@keyframes opt-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.3; }
}

@media (prefers-reduced-motion: reduce) {
	.badge--dot::before { animation: none; }
}

/* ==========================================================================
   SECTION LAYOUT
   ========================================================================== */

.opt-section { padding-block: var(--opt-spacing-xl); }
.opt-section--sm   { padding-block: var(--opt-spacing-lg); }
.opt-section--dark { background-color: var(--opt-blue-dark); }
.opt-section--mid  { background-color: var(--opt-blue-mid); }

.opt-section-header { margin-bottom: var(--opt-spacing-lg); }
.opt-section-header--center { text-align: center; }

/* ==========================================================================
   CARDS
   ========================================================================== */

.opt-card {
	background: var(--opt-blue-mid);
	border: 1px solid var(--opt-border-gold);
	border-radius: var(--opt-radius);
	transition: border-color var(--opt-transition),
				transform var(--opt-transition),
				box-shadow var(--opt-transition);
}

.opt-card:hover { border-color: var(--opt-border-gold-md); }

.opt-card--lift:hover {
	transform: translateY(-5px);
	border-color: var(--opt-border-gold-md);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.30);
}

[data-theme="light"] .opt-card,
[data-theme="light"] .opt-card__body {
	background: #ffffff;
	border-color: var(--opt-border-gold);
	box-shadow: 0 2px 12px rgba(22, 32, 58, 0.05);
}

[data-theme="light"] .opt-card--lift:hover {
	box-shadow: 0 12px 32px rgba(22, 32, 58, 0.12);
}

.opt-card__body { padding: 2rem; }
.opt-card__body--lg { padding: 2.5rem; }

/* ==========================================================================
   REVEAL ANIMATIONS
   ========================================================================== */

.reveal {
	opacity: 1;
	transform: none;
}

.js .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.75s ease, transform 0.75s ease;
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal,
	.reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ==========================================================================
   TICKER / MARQUEE — "Unsere Kunden vertrauen uns"

   3 austauschbare Hintergrund-Varianten. Aktiv ist Variante A.
   Zum Wechseln: <div class="opt-ticker opt-ticker--variant-b"> usw.
   ========================================================================== */

.opt-ticker {
	position: relative;
	overflow: hidden;
	padding-block: 2.5rem 2.2rem;
	border-top: 1px solid rgba(201, 168, 76, 0.18);
	border-bottom: 1px solid rgba(201, 168, 76, 0.18);
	isolation: isolate;
	transition: background var(--opt-transition), box-shadow var(--opt-transition);
}

/* ── VARIANTE A: "Inset Vault" (DEFAULT)
   Tieferes Schwarz-Blau, eingelassen wirkender Look.
   Inner-Shadow oben & unten + sanfter Gold-Glow im Zentrum. */
.opt-ticker {
	background:
		radial-gradient(ellipse 60% 80% at 50% 50%, rgba(201, 168, 76, 0.08) 0%, transparent 70%),
		linear-gradient(180deg, #050b1a 0%, #07101f 50%, #050b1a 100%);
	box-shadow:
		inset 0 14px 28px -16px rgba(0, 0, 0, 0.7),
		inset 0 -14px 28px -16px rgba(0, 0, 0, 0.7);
}

/* Subtile diagonale Streifen für mehr Tiefe */
.opt-ticker::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0px,
		transparent 12px,
		rgba(201, 168, 76, 0.025) 12px,
		rgba(201, 168, 76, 0.025) 13px
	);
	pointer-events: none;
	z-index: 0;
}

/* Sanfte Vignette an den Seiten (lässt Logos elegant ein-/ausfaden) */
.opt-ticker::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		#050b1a 0%,
		transparent 8%,
		transparent 92%,
		#050b1a 100%
	);
	pointer-events: none;
	z-index: 2;
}

/* ── VARIANTE B: "Floating Slate"
   Schwebende dunkle Platte mit Gold-Rand, deutlicher 3D-Erhebung.
   Aktivieren: <div class="opt-ticker opt-ticker--variant-b"> */
.opt-ticker--variant-b {
	background: linear-gradient(180deg, #0c1830 0%, #0a142b 100%);
	border: 1px solid rgba(201, 168, 76, 0.3);
	border-radius: 18px;
	margin-inline: clamp(1rem, 4vw, 4rem);
	margin-block: 1.5rem;
	box-shadow:
		0 22px 50px -22px rgba(0, 0, 0, 0.75),
		0 1px 0 rgba(201, 168, 76, 0.18) inset,
		0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}
.opt-ticker--variant-b::before { display: none; }
.opt-ticker--variant-b::after {
	background: linear-gradient(
		90deg,
		#0a142b 0%,
		transparent 6%,
		transparent 94%,
		#0a142b 100%
	);
}

/* ── VARIANTE C: "Aurora Mesh"
   Conic-Gradient mit Gold-Aurora an den Rändern, sehr modern.
   Aktivieren: <div class="opt-ticker opt-ticker--variant-c"> */
.opt-ticker--variant-c {
	background:
		conic-gradient(
			from 90deg at 50% 50%,
			transparent 0deg,
			rgba(201, 168, 76, 0.12) 30deg,
			transparent 60deg,
			transparent 300deg,
			rgba(201, 168, 76, 0.12) 330deg,
			transparent 360deg
		),
		linear-gradient(180deg, #04091a 0%, #060d1f 100%);
}
.opt-ticker--variant-c::before {
	background:
		radial-gradient(circle at 0% 50%, rgba(201, 168, 76, 0.15) 0%, transparent 40%),
		radial-gradient(circle at 100% 50%, rgba(201, 168, 76, 0.15) 0%, transparent 40%);
}

.opt-ticker__label {
	position: relative;
	z-index: 3;
	color: rgba(245, 240, 232, 0.5);
	text-align: center;
	margin-bottom: 1.5rem !important;
	font-size: 0.78rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.opt-ticker__track {
	position: relative;
	z-index: 1;
	display: flex;
	gap: 4rem;
	animation: opt-ticker 38s linear infinite;
	white-space: nowrap;
	width: max-content;
}

.opt-ticker__track:hover,
.opt-ticker__track:focus-within {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.opt-ticker__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
		gap: 2rem;
	}
}

@keyframes opt-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.opt-ticker__item {
	font-family: var(--opt-font-serif);
	font-size: 1.15rem;
	font-weight: 500;
	color: rgba(245, 240, 232, 0.45);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	flex-shrink: 0;
	transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
	cursor: default;
	padding-inline: 0.5rem;
}

.opt-ticker__item:hover {
	color: var(--opt-gold-light, #e8c97a);
	text-shadow: 0 0 18px rgba(232, 201, 122, 0.45);
	transform: translateY(-1px);
}

/* ── LIGHT MODE — Ticker bleibt dunkel, schafft starken Kontrast zur hellen Umgebung */
[data-theme="light"] .opt-ticker {
	background:
		radial-gradient(ellipse 60% 80% at 50% 50%, rgba(201, 168, 76, 0.12) 0%, transparent 70%),
		linear-gradient(180deg, #0a142b 0%, #0d1a34 50%, #0a142b 100%);
	border-top-color: rgba(201, 168, 76, 0.35);
	border-bottom-color: rgba(201, 168, 76, 0.35);
	box-shadow:
		inset 0 14px 28px -16px rgba(0, 0, 0, 0.45),
		inset 0 -14px 28px -16px rgba(0, 0, 0, 0.45),
		0 8px 24px -12px rgba(10, 20, 43, 0.25);
}
[data-theme="light"] .opt-ticker::after {
	background: linear-gradient(90deg, #0a142b 0%, transparent 8%, transparent 92%, #0a142b 100%);
}
[data-theme="light"] .opt-ticker__item { color: rgba(245, 240, 232, 0.55); }
[data-theme="light"] .opt-ticker__item:hover { color: #e8c97a; }
[data-theme="light"] .opt-ticker__label { color: rgba(245, 240, 232, 0.55); }

/* ==========================================================================
   DIVIDER
   ========================================================================== */

.opt-divider {
	border: none;
	border-top: 1px solid var(--opt-border-gold);
	margin: 0;
}

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

@media (max-width: 1024px) {
	:root {
		--opt-spacing-xl: 5rem;
		--opt-spacing-lg: 3rem;
	}
}

@media (max-width: 768px) {
	:root {
		--opt-spacing-xl: 4rem;
		--opt-spacing-lg: 2rem;
	}
	.container { padding-inline: 1.5rem; }
}

@media (max-width: 480px) {
	.container { padding-inline: 1rem; }
}

/* ==========================================================================
   WORDPRESS CORE ALIGNMENT CLASSES
   ========================================================================== */

.alignleft   { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.alignright  { float: right; margin-left: 1.5rem;  margin-bottom: 1rem; }
.aligncenter { display: block; margin-inline: auto; margin-bottom: 1rem; }
.alignwide   { max-width: var(--opt-container-wide); margin-inline: auto; }
.alignfull   { width: 100%; max-width: none; }

.wp-block-image img    { border-radius: var(--opt-radius); }
.has-text-align-center { text-align: center; }
.has-text-align-right  { text-align: right; }
.has-text-align-left   { text-align: left; }

/* ==========================================================================
   SKIP LINK (Accessibility)
   ========================================================================== */

.skip-link {
	position: absolute;
	top: -100%;
	left: 1rem;
	background: var(--opt-gold);
	color: var(--opt-blue-darkest);
	padding: 0.75rem 1.25rem;
	font-weight: 600;
	font-size: 0.85rem;
	z-index: 9999;
	transition: top 0.15s ease;
	border-radius: var(--opt-radius);
	text-decoration: none;
}

[data-theme="light"] .skip-link { color: #ffffff; }

.skip-link:focus,
.skip-link:focus-visible {
	top: 1rem;
	outline: 2px solid var(--opt-cream);
	outline-offset: 2px;
}

/* ==========================================================================
   GLOBAL TRANSITIONS — soft theme switching
   ========================================================================== */

body,
.opt-section,
.opt-card,
.site-header,
.site-footer,
.hero__stat {
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* ==========================================================================
   LIGHT MODE — Globale Text-/Heading-Korrekturen
   (Komponentenspezifisch in msd-light-mode.css)
   ========================================================================== */

[data-theme="light"] p,
[data-theme="light"] li,
[data-theme="light"] .opt-body,
[data-theme="light"] [class*="__sub"],
[data-theme="light"] [class*="__text"] {
	color: var(--opt-text-muted);
}

[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6,
[data-theme="light"] [class*="__heading"],
[data-theme="light"] [class*="__title"] {
	color: var(--opt-text);
}

[data-theme="light"] .opt-eyebrow,
[data-theme="light"] em,
[data-theme="light"] .hero__heading em,
[data-theme="light"] h1 em,
[data-theme="light"] h2 em {
	color: var(--opt-gold);
}

/* ==========================================================================
   FOOTER — Icons, Social, Contact (Dark + Light)
   ========================================================================== */

.site-footer {
	background: var(--opt-blue-dark);
	border-top: 1px solid var(--opt-border-gold);
}

[data-theme="light"] .site-footer {
	background: var(--opt-blue-mid);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
	gap: 2.5rem 2rem;
	padding: 3.5rem 0 2.5rem;
}

/* Brand-Spalte */
.site-footer__logo img,
.site-footer__logo .custom-logo {
	max-width: 200px;
	height: auto;
}

.site-footer__logo-text {
	font-family: var(--opt-font-serif);
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--opt-cream);
	letter-spacing: 0.04em;
	text-decoration: none;
}
.site-footer__logo-dot { color: var(--opt-gold); }

/* Social Icons — Brand-Colors mit Glow auf Hover (Dark + Light Mode)
   ===================================================================
   Markup: <a class="site-footer__social-icon" data-social="facebook|instagram|linkedin|youtube|tiktok|whatsapp">
   - Default: dezent gold-getönt
   - Hover/Focus: Originalfarbe der Plattform + Glow + Lift
   ─────────────────────────────────────────────────────────────────── */

.site-footer__social-icons {
	display: flex;
	gap: 0.75rem;
	margin: 1.25rem 0 1.5rem;
	flex-wrap: wrap;
}

.site-footer__social-icon {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid var(--opt-border-gold);
	background: var(--opt-info-bg);
	color: var(--opt-text-faint);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition:
		color 0.25s ease,
		border-color 0.25s ease,
		background 0.25s ease,
		box-shadow 0.3s ease,
		transform 0.25s ease;
	position: relative;
	overflow: hidden;
}

/* Glow-Layer (eigenes Pseudo-Element für sauberen Effekt) */
.site-footer__social-icon::before {
	content: "";
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
	background: radial-gradient(circle at center, currentColor 0%, transparent 70%);
	filter: blur(8px);
	z-index: -1;
}

.site-footer__social-icon svg {
	position: relative;
	z-index: 1;
	transition: transform 0.3s ease;
}

.site-footer__social-icon:hover,
.site-footer__social-icon:focus-visible {
	transform: translateY(-3px);
	background: transparent;
}
.site-footer__social-icon:hover::before,
.site-footer__social-icon:focus-visible::before {
	opacity: 0.6;
}
.site-footer__social-icon:hover svg,
.site-footer__social-icon:focus-visible svg {
	transform: scale(1.1);
}

/* ── BRAND COLORS — Plattform-Originalfarben auf Hover ── */
.site-footer__social-icon[data-social="facebook"]:hover,
.site-footer__social-icon[data-social="facebook"]:focus-visible {
	color: #1877F2;
	border-color: #1877F2;
	box-shadow: 0 0 0 1px rgba(24, 119, 242, 0.4), 0 8px 24px -6px rgba(24, 119, 242, 0.55);
}

.site-footer__social-icon[data-social="instagram"]:hover,
.site-footer__social-icon[data-social="instagram"]:focus-visible {
	color: #E1306C;
	border-color: #E1306C;
	box-shadow: 0 0 0 1px rgba(225, 48, 108, 0.4), 0 8px 24px -6px rgba(225, 48, 108, 0.55);
}

.site-footer__social-icon[data-social="linkedin"]:hover,
.site-footer__social-icon[data-social="linkedin"]:focus-visible {
	color: #0A66C2;
	border-color: #0A66C2;
	box-shadow: 0 0 0 1px rgba(10, 102, 194, 0.4), 0 8px 24px -6px rgba(10, 102, 194, 0.55);
}

.site-footer__social-icon[data-social="youtube"]:hover,
.site-footer__social-icon[data-social="youtube"]:focus-visible {
	color: #FF0000;
	border-color: #FF0000;
	box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.4), 0 8px 24px -6px rgba(255, 0, 0, 0.5);
}

.site-footer__social-icon[data-social="tiktok"]:hover,
.site-footer__social-icon[data-social="tiktok"]:focus-visible {
	color: #ff0050;
	border-color: #ff0050;
	box-shadow: 0 0 0 1px rgba(255, 0, 80, 0.4), 0 8px 24px -6px rgba(255, 0, 80, 0.5);
}

.site-footer__social-icon[data-social="whatsapp"]:hover,
.site-footer__social-icon[data-social="whatsapp"]:focus-visible {
	color: #25D366;
	border-color: #25D366;
	box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.4), 0 8px 24px -6px rgba(37, 211, 102, 0.55);
}

/* ── LIGHT MODE ── */
[data-theme="light"] .site-footer__social-icon {
	color: rgba(22, 32, 58, 0.6);
	border-color: rgba(139, 105, 20, 0.3);
	background: rgba(255, 255, 255, 0.6);
}
[data-theme="light"] .site-footer__social-icon:hover,
[data-theme="light"] .site-footer__social-icon:focus-visible {
	background: rgba(255, 255, 255, 0.95);
}

/* Light-Mode-Glows etwas dezenter, da heller Hintergrund */
[data-theme="light"] .site-footer__social-icon[data-social="facebook"]:hover {
	box-shadow: 0 0 0 1px rgba(24, 119, 242, 0.35), 0 6px 18px -4px rgba(24, 119, 242, 0.4);
}
[data-theme="light"] .site-footer__social-icon[data-social="instagram"]:hover {
	box-shadow: 0 0 0 1px rgba(225, 48, 108, 0.35), 0 6px 18px -4px rgba(225, 48, 108, 0.4);
}
[data-theme="light"] .site-footer__social-icon[data-social="linkedin"]:hover {
	box-shadow: 0 0 0 1px rgba(10, 102, 194, 0.35), 0 6px 18px -4px rgba(10, 102, 194, 0.4);
}
[data-theme="light"] .site-footer__social-icon[data-social="youtube"]:hover {
	box-shadow: 0 0 0 1px rgba(255, 0, 0, 0.35), 0 6px 18px -4px rgba(255, 0, 0, 0.4);
}
[data-theme="light"] .site-footer__social-icon[data-social="tiktok"]:hover {
	box-shadow: 0 0 0 1px rgba(255, 0, 80, 0.35), 0 6px 18px -4px rgba(255, 0, 80, 0.4);
}
[data-theme="light"] .site-footer__social-icon[data-social="whatsapp"]:hover {
	box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.35), 0 6px 18px -4px rgba(37, 211, 102, 0.4);
}

/* Reduced Motion respektieren */
@media (prefers-reduced-motion: reduce) {
	.site-footer__social-icon { transition: none; }
	.site-footer__social-icon:hover,
	.site-footer__social-icon:focus-visible { transform: none; }
	.site-footer__social-icon:hover svg,
	.site-footer__social-icon:focus-visible svg { transform: none; }
}

/* A11y Badge */
.site-footer__a11y-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.45rem 0.85rem;
	background: var(--opt-success-bg);
	border: 1px solid rgba(90, 200, 130, 0.25);
	border-radius: var(--opt-radius-md);
	color: var(--opt-success);
	font-size: 0.72rem;
}
.site-footer__a11y-label { display: block; font-weight: 600; font-size: 0.73rem; }
.site-footer__a11y-sub   { display: block; opacity: 0.7; font-size: 0.65rem; }

/* Column Titles */
.site-footer__col-title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.72rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--opt-gold);
	margin-bottom: 1rem;
	font-weight: 700;
}

/* Footer Links */
.site-footer__links { list-style: none; padding: 0; margin: 0; }
.site-footer__links li { margin-bottom: 0.45rem; }
.site-footer__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--opt-text-faint);
	text-decoration: none;
	font-size: 0.88rem;
	transition: color .2s ease;
	padding: 0.15rem 0;
	min-height: 32px;
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible {
	color: var(--opt-gold);
}
[data-theme="light"] .site-footer__links a { color: rgba(22, 32, 58, 0.7); }
[data-theme="light"] .site-footer__links a:hover { color: var(--opt-gold-dark); }

/* Contact Box */
.site-footer__contact-box {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .site-footer__contact-box {
	border-top-color: rgba(0, 0, 0, 0.08);
}

.site-footer__contact-title {
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--opt-cream);
	margin-bottom: 0.4rem;
}

.site-footer__contact-link {
	display: block;
	color: var(--opt-gold);
	font-size: 0.85rem;
	text-decoration: none;
	margin-bottom: 0.25rem;
	word-break: break-word;
}
.site-footer__contact-link:hover { text-decoration: underline; }

.site-footer__address {
	font-size: 0.8rem;
	color: var(--opt-text-faint);
	font-style: normal;
	line-height: 1.5;
}

/* Footer Bottom */
.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding: 1.25rem 0;
}
[data-theme="light"] .site-footer__bottom {
	border-top-color: rgba(0, 0, 0, 0.08);
}

.site-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.site-footer__copyright {
	font-size: 0.8rem;
	color: var(--opt-text-faint);
	margin: 0;
}

.site-footer__bottom-links { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer__bottom-links a {
	font-size: 0.8rem;
	color: var(--opt-text-faint);
	text-decoration: none;
}
.site-footer__bottom-links a:hover { color: var(--opt-gold); }

.site-footer__tagline {
	font-size: 0.88rem;
	color: var(--opt-text-muted);
	line-height: 1.6;
	margin: 0.75rem 0 0;
}

.site-footer__credit { font-size: 0.8rem; color: var(--opt-text-faint); margin: 0; }
.site-footer__theme-name { color: var(--opt-gold); font-weight: 600; }

/* Footer Responsive */
@media (max-width: 900px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
}

@media (max-width: 600px) {
	.site-footer__grid { grid-template-columns: 1fr; gap: 1.75rem; }
	.site-footer__bottom-inner { flex-direction: column; text-align: center; }
}

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

@media print {
	.site-header,
	.site-footer,
	.skip-link,
	.msd-popup-overlay,
	.opt-ticker,
	video,
	iframe { display: none !important; }

	body { background: #fff !important; color: #000 !important; }
	a { color: #000 !important; text-decoration: underline; }
	a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }

	.opt-section { padding-block: 1rem !important; }
	h1, h2, h3 { page-break-after: avoid; color: #000 !important; }
	img { max-width: 100% !important; page-break-inside: avoid; }
}

/* ==========================================================================
   HIGH CONTRAST MODE (Forced Colors / Windows High Contrast)
   ========================================================================== */

@media (forced-colors: active) {
	.btn,
	.btn--primary,
	.btn--outline,
	.opt-card {
		border: 1px solid CanvasText;
	}

	.btn--primary {
		background: ButtonFace;
		color: ButtonText;
		forced-color-adjust: none;
	}
}