/**
 * Suritec – Design-Tokens, gemeinsame Bausteine und Hilfsklassen.
 * Abhängigkeit aller Widget-Styles. Doku: DESIGN-TOKENS.md
 *
 * Tokens lesen die Elementor Global Colors/Fonts (Site Settings) und fallen auf die
 * Prototyp-Werte zurück. Widgets überschreiben einzelne --suritec-* über ihre Style-Controls.
 */

/* ------------------------------------------------------------------ Tokens */
body {
	/* Farben (Elementor Global Colors) */
	--suritec-primary: var(--e-global-color-primary, #ff9127);
	--suritec-primary-hover: var(--e-global-color-accent, #ffac52);
	--suritec-bg: var(--e-global-color-secondary, #0d0c0b);
	--suritec-text: var(--e-global-color-text, #f4f2ef);
	--suritec-bg-hero: var(--e-global-color-suritec_bg_hero, #0b0a09);
	--suritec-card: var(--e-global-color-suritec_card, #1a1816);
	--suritec-card-2: var(--e-global-color-suritec_card_2, #16130f);
	--suritec-ink: var(--e-global-color-suritec_ink, #140d05);
	--suritec-light-bg: var(--e-global-color-suritec_light_bg, #f2efea);
	--suritec-light-text: var(--e-global-color-suritec_light_text, #16130f);
	--suritec-light-body: var(--e-global-color-suritec_light_body, #4a433b);
	--suritec-light-line: var(--e-global-color-suritec_light_line, #d9d2c7);
	--suritec-light-line-2: var(--e-global-color-suritec_light_line_2, #e3ddd4);
	--suritec-light-accent: var(--e-global-color-suritec_light_accent, #b35d00);
	--suritec-green: var(--e-global-color-suritec_green, #5dff7a);
	--suritec-axa: var(--e-global-color-suritec_axa, #00008f);

	/* Schriften (Elementor Global Fonts) */
	--suritec-font: var(--e-global-typography-text-font-family, "Geist"), "Geist", system-ui, sans-serif;
	--suritec-font-head: var(--e-global-typography-primary-font-family, "Geist"), "Geist", system-ui, sans-serif;
	--suritec-font-mono: var(--e-global-typography-secondary-font-family, "Geist Mono"), "Geist Mono", ui-monospace, monospace;

	/* Layout */
	--suritec-pad-x: clamp(20px, 6vw, 96px);
	--suritec-pad-y: clamp(100px, 14vh, 160px);
	--suritec-max: 1240px;
	--suritec-ease: cubic-bezier(.2, .8, .2, 1);

	/* Bewegungsfaktor: 0 bei prefers-reduced-motion (Translationen entfallen) */
	--suritec-m: 1;

	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	body {
		--suritec-m: 0;
	}
}

/* ------------------------------------------------------------------ Basis */
:where([id]) {
	scroll-margin-top: 64px;
}

.suritec {
	position: relative;
	font-size: 16px;
	letter-spacing: normal;
	line-height: normal;
	font-family: var(--suritec-font);
	color: var(--suritec-text);
	-webkit-font-smoothing: antialiased;
	--suritec-text-72: color-mix(in srgb, var(--suritec-text) 72%, transparent);
	--suritec-text-55: color-mix(in srgb, var(--suritec-text) 55%, transparent);
}

.suritec [hidden] {
	display: none !important;
}

.suritec *,
.suritec *::before,
.suritec *::after {
	box-sizing: border-box;
}

.suritec a {
	color: inherit;
	text-decoration: none;
}

.suritec a:hover,
.suritec a:focus-visible {
	color: var(--suritec-primary);
}

.suritec img {
	max-width: 100%;
}

.suritec :where(h1, h2, h3, h4, p, blockquote, figure, figcaption, ul, ol) {
	margin: 0;
	padding: 0;
}

/* Theme-Vorgaben neutralisieren (z. B. text-wrap, Überschriften-Farben). */
.suritec h1,
.suritec h2,
.suritec h3,
.suritec h4,
.suritec p,
.suritec blockquote,
.suritec figcaption {
	text-wrap: wrap;
	color: inherit;
	font-family: inherit;
	text-transform: none;
}

.suritec figcaption,
.suritec blockquote {
	font-size: inherit;
	font-style: normal;
	font-weight: inherit;
	line-height: inherit;
	text-align: inherit;
	border: 0;
	padding: 0;
}

/* Theme-Button-Vorgaben (z. B. Hello Elementor reset.css) neutralisieren;
 * die Komponenten setzen Rahmen, Hintergrund, Abstände und Übergänge selbst. */
.suritec :where(button) {
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	white-space: normal;
	text-decoration: none;
	transition: none;
	user-select: auto;
}

.suritec :focus-visible {
	outline: 2px solid var(--suritec-primary);
	outline-offset: 3px;
}

/* Abschnitt mit Standard-Padding */
.suritec-section {
	padding: var(--suritec-pad-y) var(--suritec-pad-x);
}

.suritec-inner {
	max-width: var(--suritec-max);
	margin: 0 auto;
}

/* ------------------------------------------------------------------ Typografie */
.suritec .suritec-eyebrow,
.suritec-eyebrow {
	font-family: var(--suritec-font-mono);
	font-size: 12px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--suritec-primary);
}

.suritec .suritec-h2,
.suritec-h2 {
	font-family: var(--suritec-font-head);
	font-size: clamp(40px, 5.6vw, 84px);
	line-height: .95;
	font-weight: 600;
	letter-spacing: -.045em;
	text-wrap: balance;
}

.suritec .suritec-lead,
.suritec-lead {
	font-family: var(--suritec-font);
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
	color: var(--suritec-text-72, color-mix(in srgb, var(--suritec-text) 72%, transparent));
	max-width: 520px;
	text-wrap: pretty;
}

/* Abschnitts-Kopf: Eyebrow + H2 links, Lead rechts */
.suritec-head {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 32px 64px;
	align-items: end;
}

.suritec-head .suritec-eyebrow {
	margin-bottom: 20px;
}

/* ------------------------------------------------------------------ Buttons */
.suritec .suritec-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 15px 24px;
	border-radius: 999px;
	border: 1px solid transparent;
	font-family: var(--suritec-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.suritec .suritec-btn--primary {
	background: var(--suritec-primary);
	color: var(--suritec-ink);
	font-weight: 600;
}

.suritec .suritec-btn--primary:hover,
.suritec .suritec-btn--primary:focus-visible {
	background: var(--suritec-primary-hover);
	color: var(--suritec-ink);
}

.suritec .suritec-btn--outline {
	background: transparent;
	border-color: color-mix(in srgb, var(--suritec-text) 30%, transparent);
	color: var(--suritec-text);
}

.suritec .suritec-btn--outline:hover,
.suritec .suritec-btn--outline:focus-visible {
	border-color: var(--suritec-text);
	color: var(--suritec-text);
}

.suritec .suritec-link {
	display: inline-flex;
	font-size: 15px;
	border-bottom: 1px solid color-mix(in srgb, var(--suritec-text) 40%, transparent);
	padding-bottom: 3px;
}

/* Chips (Filter, Auswahl) */
.suritec .suritec-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.suritec .suritec-chip {
	padding: 10px 16px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .16);
	background: transparent;
	color: var(--suritec-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	cursor: pointer;
	transition: all .18s ease;
}

.suritec .suritec-chip:hover,
.suritec .suritec-chip:focus-visible {
	background: transparent;
	color: var(--suritec-text);
}

.suritec .suritec-chip[aria-pressed="true"] {
	border-color: var(--suritec-primary);
	background: var(--suritec-primary);
	color: var(--suritec-ink);
	font-weight: 600;
}

.suritec .suritec-btn--sm {
	padding: 12px 18px;
	font-size: 14px;
}

/* ------------------------------------------------------------------ Reveal (--e 0→1) */
.suritec-rv {
	opacity: var(--e, 1);
	transform: translateY(calc((1 - var(--e, 1)) * var(--rv-y, 50px) * var(--suritec-m)));
}

/* ------------------------------------------------------------------ Pinned-Abschnitte */
.suritec-pin {
	position: relative;
}

.suritec-pin__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	overflow: hidden;
}

/* Elementor-Editor: statisch, eine Bildschirmhöhe, Zustand per Control */
.suritec-pin.suritec-is-static {
	height: auto !important;
}

.suritec-pin.suritec-is-static .suritec-pin__sticky {
	position: relative;
}

.suritec-editor-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	padding: 6px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .65);
	color: #fff;
	font: 500 11px/1.2 var(--suritec-font-mono, monospace);
	letter-spacing: .12em;
	text-transform: uppercase;
	pointer-events: none;
}

.suritec-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Reveal für Standard-Container: Elementor → Erweitert → CSS-Klassen „suritec-reveal“.
 * suritec-scroll.js setzt --e auf genau dieses Element (eigene Klasse, keine Elementor-Interna). */
.suritec-reveal {
	opacity: var(--e, 1);
	transform: translateY(calc((1 - var(--e, 1)) * var(--suritec-reveal-y, 50px) * var(--suritec-m)));
}

.suritec-reveal--60 {
	--suritec-reveal-y: 60px;
}