/**
 * ForSec Designsystem – Child-Theme-Styles.
 *
 * Quelle: freigegebene Beispielseiten (Material/Beispielseiten).
 * Farb-/Typo-Grundwerte kommen zusätzlich über den YOOtheme-Style
 * (ForSec_Style_YooTheme.json); dieses CSS liefert die markanten
 * Komponenten, die das Style-System nicht abdeckt.
 */

/* ---------- Schrift: Inter (selbst gehostet, DSGVO-konform) ---------- */

@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/InterVariable-Italic.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

/* ---------- Design-Tokens ---------- */

:root {
	--fhs-accent: #d33a26;
	--fhs-accent-hover: #b22e1d;
	--fhs-text: #1a1a1a;
	--fhs-emphasis: #0d0d0d;
	--fhs-muted: #6b7280;
	--fhs-border: #e6e5e2;
	--fhs-bg: #ffffff;
	--fhs-bg-warm: #f3f1ea;
	--fhs-bg-dark: #0d0d0d;
	--fhs-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fhs-spring: cubic-bezier(0.34, 1.32, 0.4, 1);
	--fhs-snap: cubic-bezier(0.2, 0.8, 0.2, 1);
	--fhs-radius: 8px;
	--fhs-radius-pill: 999px;

	/* Token-Brücke: wird u. a. vom ForSec-Products-Plugin gelesen. */
	--uk-global-primary-background: var(--fhs-accent);
	--uk-global-secondary-background: var(--fhs-bg-dark);
	--uk-global-muted-background: var(--fhs-bg-warm);
	--uk-global-border: var(--fhs-border);
	--uk-global-link-color: var(--fhs-accent);
	--uk-global-inverse-color: #ffffff;
	--uk-global-margin: 24px;
	--uk-card-border-radius: var(--fhs-radius);
	--uk-card-color: var(--fhs-text);
}

/* ---------- Basis + Fallback-Ebene ----------
   Deckt die Kernwerte auch dann ab, wenn der YOOtheme-Style-Import
   (ForSec_Style_YooTheme.json) nicht angewendet wurde.
   Wichtig: YOOtheme druckt seine kompilierte theme.css NACH diesem
   Stylesheet – alle Selektoren, die mit Theme-Selektoren konkurrieren,
   sind deshalb mit `html`/`:root` minimal höher spezifiziert. */

html:root,
html:root body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	-webkit-font-smoothing: antialiased;
}

html:root body {
	color: var(--fhs-text);
	background: var(--fhs-bg);
	font-size: 16px;
	line-height: 1.6;
}

/* Bewusst KEINE globale Link-Färbung in Akzentrot: Rot ist der primäre
   Farbakzent und bleibt Buttons, Eyebrows und einzelnen CTA-Zeilen
   vorbehalten. Ganze Karten sind Links – eine globale a-Regel würde
   sie komplett rot färben. */

html h1, html h2, html h3, html h4, html h5, html h6,
html .uk-h1, html .uk-h2, html .uk-h3, html .uk-h4, html .uk-h5, html .uk-h6,
html .uk-card-title {
	/* Auch Karten-Titel: Fuse liefert hier sonst Playfair Display (Serife). */
	font-family: inherit;
	color: var(--fhs-emphasis);
}

.uk-text-muted {
	color: var(--fhs-muted) !important;
}

.uk-section-muted:not(.uk-preserve-color) {
	background: var(--fhs-bg-warm);
}

.uk-section-primary:not(.uk-preserve-color) {
	background: var(--fhs-accent);
}

.uk-section-secondary:not(.uk-preserve-color) {
	background: var(--fhs-bg-dark);
}

.uk-section-secondary:not(.uk-preserve-color) h1,
.uk-section-secondary:not(.uk-preserve-color) h2,
.uk-section-secondary:not(.uk-preserve-color) h3,
.uk-section-secondary:not(.uk-preserve-color) .uk-h1,
.uk-section-secondary:not(.uk-preserve-color) .uk-h2,
.uk-section-secondary:not(.uk-preserve-color) .uk-h3 {
	color: #fff;
}

.uk-section-secondary:not(.uk-preserve-color) p,
.uk-section-secondary:not(.uk-preserve-color) .uk-text-lead {
	color: rgba(236, 236, 236, 0.72);
}

html .uk-navbar-nav > li > a {
	color: var(--fhs-text);
	font-weight: 600;
	text-transform: none;
	font-size: 1rem;
}

html .uk-navbar-nav > li > a:hover,
html .uk-navbar-nav > li > a[aria-expanded="true"] {
	color: var(--fhs-emphasis);
}

html .uk-navbar-nav > li.uk-active > a {
	color: var(--fhs-accent);
}

/* ---------- Glas-Navbar (transparenter Header, nach Beispielseiten) ---------- */

/* Etwas Luft, damit die Pill über dem Hero „schwebt“. */

html .tm-header .uk-navbar-container.uk-navbar-transparent,
html .fhs-dark-shell .tm-header .uk-navbar-container {
	padding-top: 16px;
	padding-bottom: 16px;
	transition: padding 0.35s var(--fhs-ease);
}

/* Die gläserne Pill um die Menüpunkte – Liquid-Glass-Optik:
   transparenter Grund, starker Blur mit Sättigung, Lichtkante oben.
   Bewusst clean: keine Flächen-Pills für Hover/Aktiv, nur Typografie
   plus kleiner Akzentpunkt unter dem aktiven Menüpunkt. */

html .tm-header .uk-navbar-transparent .uk-navbar-nav,
html .fhs-dark-shell .tm-header .uk-navbar-nav {
	gap: 4px;
	padding: 5px 14px;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(255, 255, 255, 0) 100%),
		rgba(18, 18, 18, 0.38);
	backdrop-filter: saturate(180%) blur(22px);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		inset 0 -1px 1px rgba(255, 255, 255, 0.04),
		0 14px 34px -16px rgba(0, 0, 0, 0.55);
}

html .tm-header .uk-navbar-transparent .uk-navbar-nav > li > a,
html .fhs-dark-shell .tm-header .uk-navbar-nav > li > a {
	position: relative;
	min-height: 38px;
	padding: 0 14px;
	border-radius: 999px;
	background: none;
	box-shadow: none;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(255, 255, 255, 0.7);
	transition: color 0.25s var(--fhs-ease);
}

html .tm-header .uk-navbar-transparent .uk-navbar-nav > li > a:hover,
html .tm-header .uk-navbar-transparent .uk-navbar-nav > li > a[aria-expanded="true"],
html .tm-header .uk-navbar-transparent .uk-navbar-nav > li.uk-active > a,
html .fhs-dark-shell .tm-header .uk-navbar-nav > li > a:hover,
html .fhs-dark-shell .tm-header .uk-navbar-nav > li > a[aria-expanded="true"],
html .fhs-dark-shell .tm-header .uk-navbar-nav > li.uk-active > a {
	background: none;
	box-shadow: none;
	color: #fff;
}

/* Kleiner roter Punkt als Aktiv-Marker. */

html .tm-header .uk-navbar-transparent .uk-navbar-nav > li.uk-active > a::after,
html .fhs-dark-shell .tm-header .uk-navbar-nav > li.uk-active > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 4px;
	height: 4px;
	margin-left: -2px;
	border-radius: 50%;
	background: var(--fhs-accent);
}

/* Suche als eigener Glas-Kreis neben der Pill. */

html .tm-header .uk-navbar-transparent a.uk-navbar-toggle,
html .fhs-dark-shell .tm-header a.uk-navbar-toggle {
	width: 50px;
	height: 50px;
	min-height: 0;
	margin-left: 10px;
	border-radius: 50%;
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 100%),
		rgba(18, 18, 18, 0.38);
	backdrop-filter: saturate(180%) blur(22px);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.16),
		0 14px 34px -16px rgba(0, 0, 0, 0.55);
	color: rgba(236, 236, 236, 0.9);
	transition: background-color 0.25s var(--fhs-ease), color 0.25s var(--fhs-ease);
}

html .tm-header .uk-navbar-transparent a.uk-navbar-toggle:hover,
html .fhs-dark-shell .tm-header a.uk-navbar-toggle:hover {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 100%),
		rgba(18, 18, 18, 0.38);
	color: #fff;
}

/* Händlersuche-Button im Header: Versal-Pill wie im Beispiel. */

html .tm-header .uk-navbar-transparent .uk-button-primary,
html .fhs-dark-shell .tm-header .uk-button-primary {
	padding: 13px 24px;
	font-size: 12.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1.2;
}

/* Dropdowns (z. B. unter „Produkte“) im Glas-Stil. */

html .tm-header .uk-navbar-dropdown {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 60%),
		rgba(18, 18, 18, 0.78);
	backdrop-filter: saturate(180%) blur(24px);
	-webkit-backdrop-filter: saturate(180%) blur(24px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 24px 48px -16px rgba(0, 0, 0, 0.55);
	color: rgba(236, 236, 236, 0.85);
}

html .tm-header .uk-navbar-dropdown .uk-nav > li > a {
	color: rgba(236, 236, 236, 0.8);
	border-radius: 8px;
	padding: 8px 12px;
}

html .tm-header .uk-navbar-dropdown .uk-nav > li > a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

::selection {
	background: var(--fhs-accent);
	color: #fff;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--fhs-accent);
	outline-offset: 2px;
}

/* Headline-Sprache der Beispielseiten: Versalien, 800, enge Zurichtung. */

html h1,
html h2,
html .uk-h1,
html .uk-h2,
html .uk-heading-small,
html .uk-heading-medium,
html .uk-heading-large {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.06;
}

html h3,
html .uk-h3 {
	font-weight: 700;
	letter-spacing: -0.005em;
}

/* Eyebrow-Label (im Builder als Klasse auf Text-Elemente legen). */

.fhs-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--fhs-accent);
}

.fhs-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: var(--fhs-accent);
}

/* ---------- Buttons: Pill-Form mit rotem Glow ---------- */

html .uk-button {
	border-radius: var(--fhs-radius-pill);
	font-weight: 600;
	text-transform: none;
	letter-spacing: -0.005em;
	transition: transform 0.3s var(--fhs-spring), background-color 0.25s var(--fhs-ease), box-shadow 0.3s var(--fhs-ease), color 0.25s var(--fhs-ease), border-color 0.25s var(--fhs-ease);
}

html .uk-button-primary {
	background-color: var(--fhs-accent);
	color: #fff;
	box-shadow: 0 16px 34px -14px rgba(211, 58, 38, 0.75);
}

html .uk-button-primary:hover,
html .uk-button-primary:focus-visible {
	background-color: var(--fhs-accent-hover);
	color: #fff;
	transform: translateY(-3px);
}

html .uk-button-default {
	border: 1px solid var(--fhs-border);
	background: transparent;
	color: var(--fhs-text);
}

html .uk-button-default:hover,
html .uk-button-default:focus-visible {
	border-color: var(--fhs-text);
	color: var(--fhs-text);
	transform: translateY(-2px);
}

/* Ghost-Variante auf dunklen Sektionen. */

.uk-section-secondary .uk-button-default,
.uk-card-secondary .uk-button-default,
.fhs-dark-shell .uk-button-default {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.24);
	color: #fff;
}

.uk-section-secondary .uk-button-default:hover,
.fhs-dark-shell .uk-button-default:hover {
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

/* ---------- Karten ---------- */

html .uk-card-default {
	border: 1px solid var(--fhs-border);
	border-radius: var(--fhs-radius);
	box-shadow: none;
	color: var(--fhs-text);
	transition: transform 0.3s var(--fhs-ease), box-shadow 0.3s var(--fhs-ease), border-color 0.3s var(--fhs-ease);
}

.uk-card-default.uk-card-hover:hover,
.fsp-card:hover {
	border-color: rgba(13, 13, 13, 0.18);
	box-shadow: 0 24px 48px -24px rgba(13, 13, 13, 0.25);
}

/* ---------- Utility-Bar (fix, 38px, Breadcrumbs + Uppercase-Links) ---------- */

.fhs-utilbar {
	position: sticky;
	top: 0;
	z-index: 100;
	height: 38px;
	background: #fff;
	border-bottom: 1px solid var(--fhs-border);
	transition: background-color 0.35s var(--fhs-ease);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.fhs-utilbar.is-past-hero {
	background: #f2f2f4;
}

.fhs-utilbar__inner {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 32px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	color: var(--fhs-text);
}

.fhs-utilbar__crumbs {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: var(--fhs-muted);
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.fhs-utilbar__crumbs a {
	color: var(--fhs-muted);
	text-decoration: none;
	transition: color 0.2s var(--fhs-ease);
}

.fhs-utilbar__crumbs a:hover {
	color: var(--fhs-text);
}

.fhs-utilbar__crumbsep {
	opacity: 0.45;
}

.fhs-utilbar__right {
	display: flex;
	align-items: center;
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	flex-shrink: 0;
}

.fhs-utilbar__right a {
	color: var(--fhs-text);
	text-decoration: none;
	transition: color 0.2s var(--fhs-ease);
}

.fhs-utilbar__right a:hover {
	color: var(--fhs-accent);
}

@media (max-width: 639px) {
	.fhs-utilbar__right {
		display: none;
	}
}

/* Die Utility-Bar übernimmt die Breadcrumbs – die des Plugins ausblenden. */

.fhs-has-utilbar .fsp-breadcrumbs {
	display: none;
}

/* ---------- Glas-Navbar auch auf den Produktseiten (Plugin-Templates) ----------
   Dort rendert YOOtheme keinen transparenten Header (kein Builder-Layout),
   deshalb bauen wir Overlay + Invertierung selbst nach – gescopt auf die
   dunklen Produktseiten (body.fhs-dark-shell). Die Glas-Optik selbst kommt
   aus den um .fhs-dark-shell erweiterten Navbar-Regeln weiter oben. */

/* Fixiert unter der 38px-Utility-Bar: Navbar + Logo bleiben beim Scrollen
   sichtbar und können die Leiste nicht mehr überlagern. Gilt auch für
   YOOthemes eigene Overlay-Header (Builder-Seiten wie die Startseite). */

html .fhs-dark-shell .tm-header,
html .fhs-dark-shell .tm-header-mobile,
html .tm-header-overlay {
	position: fixed;
	top: 38px;
	left: 0;
	right: 0;
	z-index: 980;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color 0.35s var(--fhs-ease), border-color 0.35s var(--fhs-ease);
}

/* Beim Scrollen: dunkler Glas-Balken, damit Pill und helles Logo auch
   über weißen Inhalten (Bildbühne, Kacheln) lesbar bleiben. */

html .fhs-dark-shell .tm-header.is-scrolled,
html .fhs-dark-shell .tm-header-mobile.is-scrolled,
html .tm-header-overlay.is-scrolled {
	background: rgba(13, 13, 13, 0.82);
	backdrop-filter: saturate(160%) blur(18px);
	-webkit-backdrop-filter: saturate(160%) blur(18px);
	border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Beim Scrollen etwas kompakter. */

html .fhs-dark-shell .tm-header.is-scrolled .uk-navbar-container,
html .tm-header-overlay.is-scrolled .uk-navbar-container.uk-navbar-transparent {
	padding-top: 8px;
	padding-bottom: 8px;
}

html .fhs-dark-shell .tm-header-mobile.is-scrolled .uk-navbar-container {
	padding-top: 6px;
	padding-bottom: 6px;
}

html .fhs-dark-shell .tm-header .uk-navbar-container,
html .fhs-dark-shell .tm-header-mobile .uk-navbar-container {
	background: transparent;
	border: 0;
	box-shadow: none;
}

html .fhs-dark-shell .tm-header-mobile .uk-navbar-container {
	padding-top: 10px;
	padding-bottom: 10px;
	transition: padding 0.35s var(--fhs-ease);
}

/* Logo auf die negative (helle) Variante umschalten. */

html .fhs-dark-shell .tm-header .uk-logo img:not(.uk-logo-inverse),
html .fhs-dark-shell .tm-header-mobile .uk-logo img:not(.uk-logo-inverse) {
	display: none;
}

html .fhs-dark-shell .tm-header .uk-logo img.uk-logo-inverse,
html .fhs-dark-shell .tm-header-mobile .uk-logo img.uk-logo-inverse {
	display: inline-block;
}

/* Helle Icons für einen etwaigen mobilen Menü-Toggle. */

html .fhs-dark-shell .tm-header-mobile .uk-navbar-toggle {
	color: rgba(255, 255, 255, 0.85);
}

/* --- Inhalt unter dem schwebenden Header freistellen --- */

/* /produkte/ (kein Hero): Sektion bekommt oben Luft für die Navbar. */

html body.fhs-dark-shell.post-type-archive-forsec_product .tm-main.uk-section-default {
	padding-top: 124px;
}

/* Sicherheitsnetz für weitere Dark-Shell-Seiten ohne Hero (z. B. Serien-/Norm-Archive). */

html body.fhs-dark-shell .tm-main.uk-section-default:not(:has(.fsp-cathero)):not(:has(.fsp-prodx)) {
	padding-top: 124px;
}

/* Kategorieseiten: Hero läuft hinter die Navbar, dafür etwas mehr Höhe. */

html body.fhs-dark-shell .fsp-cathero {
	height: clamp(310px, 44vh, 470px);
}

/* Produktdetail: dunkles Band oben, die weiße Bildbühne rückt unter die Navbar. */

html body.fhs-dark-shell .fsp-prodx__hero {
	padding-top: 112px;
	background: var(--fhs-bg-dark, #0d0d0d);
}

@media (min-width: 960px) {
	html body.fhs-dark-shell.post-type-archive-forsec_product .tm-main.uk-section-default,
	html body.fhs-dark-shell .tm-main.uk-section-default:not(:has(.fsp-cathero)):not(:has(.fsp-prodx)) {
		padding-top: 154px;
	}

	html body.fhs-dark-shell .fsp-prodx__hero {
		padding-top: 132px;
	}
}

/* ---------- Container: 1320px + großzügigeres Padding (wie Beispielseiten) ---------- */

.uk-container:not(.uk-container-xsmall):not(.uk-container-small):not(.uk-container-large):not(.uk-container-xlarge):not(.uk-container-expand) {
	max-width: 1320px;
	padding-left: clamp(15px, 4vw, 32px);
	padding-right: clamp(15px, 4vw, 32px);
}

/* ---------- Dunkle Produktübersichten (Beispiel „Übersicht dunkel“) ---------- */

body.fhs-dark-shell {
	background: var(--fhs-bg-dark);
}

/* Das Theme legt den Inhalt in eine weiße Default-Sektion (tm-main) –
   auf Dark-Shell-Seiten muss diese Fläche dunkel sein. */

.fhs-dark-shell .tm-main.uk-section-default:not(.uk-preserve-color) {
	background: var(--fhs-bg-dark);
	--uk-inverse: light;
}

.fhs-dark-shell .fsp-archive {
	color: rgba(236, 236, 236, 0.82);
}

.fhs-dark-shell .fsp-archive__title,
.fhs-dark-shell .fsp-archive__section-title {
	color: #fff;
}

.fhs-dark-shell .fsp-archive__description {
	color: rgba(236, 236, 236, 0.66);
}

.fhs-dark-shell .fsp-chip {
	border-color: rgba(255, 255, 255, 0.24);
	color: rgba(236, 236, 236, 0.85);
}

.fhs-dark-shell .fsp-chip:hover,
.fhs-dark-shell .fsp-chip:focus {
	border-color: var(--fhs-accent);
	color: #fff;
}

.fhs-dark-shell .fsp-chip.is-active {
	border-color: var(--fhs-accent);
	background: rgba(211, 58, 38, 0.22);
	color: #fff;
	font-weight: 600;
}

/* Farb-Swatch-Ring: Lücke in Seitenhintergrundfarbe. */
.fhs-dark-shell .fsp-filter {
	--fsp-ring-gap: var(--fhs-bg-dark);
}

.fhs-dark-shell .fsp-archive__section-link {
	color: rgba(236, 236, 236, 0.85);
}

.fhs-dark-shell .fsp-card {
	border-color: transparent;
}

.fhs-dark-shell .uk-pagination a,
.fhs-dark-shell .uk-pagination span {
	color: rgba(236, 236, 236, 0.75);
}

/* ---------- Motion ---------- */

.fhs-rv {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s var(--fhs-ease), transform 0.8s var(--fhs-ease);
}

.fhs-rv.in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.fhs-rv {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.uk-button,
	.uk-card-default,
	.fsp-card {
		transition: none;
	}

	.uk-button-primary:hover {
		transform: none;
	}
}