/* =========================================================================
   FINKE — base.css : Variablen, Reset, Typografie, Buttons, Animationen
   Motion-Driven · dunkles Premium-Design · Gold/Violett
   ========================================================================= */

:root {
	/* Markenfarben (Customizer überschreibt --c-primary/secondary/accent) */
	--c-primary:   #7C3AED;   /* Violett */
	--c-secondary: #3B82F6;   /* Blau */
	--c-accent:    #F5A623;   /* Markengold */
	--c-accent-2:  #F97316;   /* Orange */

	/* Dunkle Basis (Markenlogo-Navy) */
	--c-bg:      #120B22;
	--c-bg-2:    #1A1033;
	--c-surface: #211641;
	--c-surface-2: #2A1C52;
	--c-line:    rgba(255,255,255,.10);
	--c-line-2:  rgba(255,255,255,.16);

	--c-fg:    #F5F2FC;
	--c-muted: #B7ADD6;
	--c-dim:   #8E84AE;

	/* Verläufe */
	--grad-brand: linear-gradient(120deg, var(--c-primary) 0%, var(--c-secondary) 55%, var(--c-accent) 120%);
	--grad-gold:  linear-gradient(120deg, var(--c-accent) 0%, var(--c-accent-2) 100%);
	--grad-text:  linear-gradient(100deg, #fff 0%, #E8DFFF 40%, var(--c-accent) 100%);
	--glass:      rgba(255,255,255,.055);
	--glass-2:    rgba(255,255,255,.09);

	/* Schatten */
	--sh-sm: 0 2px 8px rgba(0,0,0,.25);
	--sh-md: 0 14px 40px rgba(0,0,0,.35);
	--sh-lg: 0 30px 80px rgba(0,0,0,.45);
	--sh-glow: 0 16px 50px rgba(124,58,237,.35);
	--sh-glow-gold: 0 16px 50px rgba(245,166,35,.30);

	/* Typografie */
	--font-head: "Space Grotesk", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Layout */
	--maxw: 1200px;
	--gap: clamp(1rem, 3vw, 2rem);
	--radius: 20px;
	--radius-sm: 12px;
	--radius-lg: 28px;
	--ease: cubic-bezier(.22,.61,.36,1);
	--dur: 280ms;
	--header-h: 78px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	font-family: var(--font-body);
	color: var(--c-fg);
	background: var(--c-bg);
	line-height: 1.65;
	font-size: clamp(1rem, .97rem + .2vw, 1.075rem);
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Animierter Hintergrund-Schimmer */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(60% 50% at 15% 0%, rgba(124,58,237,.22), transparent 60%),
		radial-gradient(50% 45% at 90% 10%, rgba(59,130,246,.18), transparent 60%),
		radial-gradient(45% 40% at 70% 100%, rgba(245,166,35,.12), transparent 60%),
		var(--c-bg);
	background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-head);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.02em;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4.2rem); }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3rem); }
h3 { font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem); }
p  { margin: 0 0 1rem; }

::selection { background: var(--c-accent); color: #1a1033; }

/* Fokus sichtbar */
:focus-visible {
	outline: 3px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.container { width: min(100% - 2.4rem, var(--maxw)); margin-inline: auto; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -999px; top: 0; z-index: 1000;
	background: var(--c-accent); color: #1a1033; padding: .8rem 1.2rem; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---------- Gradient-Text-Helfer ---------- */
.grad-text, .hero__title em, .hero__title b {
	background: var(--grad-text);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-style: normal;
}

/* ---------- Eyebrow / Kicker ---------- */
.eyebrow, .kicker {
	display: inline-flex; align-items: center; gap: .55rem;
	font-family: var(--font-head);
	font-weight: 600; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
	color: var(--c-accent);
}
.kicker {
	background: var(--glass);
	border: 1px solid var(--c-line);
	padding: .5rem 1rem; border-radius: 999px;
	backdrop-filter: blur(10px);
	letter-spacing: .06em; text-transform: none; font-size: .85rem;
	color: var(--c-fg);
}
.kicker .ic { color: var(--c-accent); }

.eyebrow .ic { color: var(--c-accent); }

/* ---------- Buttons ---------- */
.btn {
	--btn-bg: var(--glass-2);
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	font-family: var(--font-head); font-weight: 600; font-size: .98rem;
	padding: .85rem 1.5rem; border-radius: 999px;
	border: 1px solid var(--c-line-2);
	background: var(--btn-bg);
	color: var(--c-fg);
	cursor: pointer;
	position: relative; overflow: hidden;
	transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
	will-change: transform;
	text-align: center;
}
.btn .ic { transition: transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-3px); }
.btn:hover .ic { transform: translateX(3px); }
.btn:active { transform: translateY(-1px) scale(.99); }

.btn--accent {
	background: var(--grad-gold);
	color: #221206;
	border-color: transparent;
	box-shadow: var(--sh-glow-gold);
}
.btn--accent:hover { box-shadow: 0 22px 60px rgba(245,166,35,.45); }

.btn--ghost { background: var(--glass); backdrop-filter: blur(10px); }
.btn--ghost:hover { background: var(--glass-2); }

.btn--outline { background: transparent; border-color: var(--c-line-2); }
.btn--outline:hover { border-color: var(--c-accent); color: var(--c-accent); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.05rem; }
.btn--sm { padding: .6rem 1.05rem; font-size: .9rem; }
.btn--block { width: 100%; }

/* ---------- Scroll-Reveal ---------- */
.reveal {
	opacity: 0;
	transform: translateY(34px);
	transition: opacity .7s var(--ease), transform .7s var(--ease);
	transition-delay: calc(var(--rd, 0) * 90ms);
	will-change: transform, opacity;
}
.reveal[data-delay="1"] { --rd: 1; }
.reveal[data-delay="2"] { --rd: 2; }
.reveal[data-delay="3"] { --rd: 3; }
.reveal[data-delay="4"] { --rd: 4; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1 !important; transform: none !important; transition: none; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	[data-parallax] { transform: none !important; }
}

/* ---------- Keyframes ---------- */
@keyframes float-orb {
	0%,100% { transform: translate3d(0,0,0) scale(1); }
	50%     { transform: translate3d(20px,-30px,0) scale(1.08); }
}
@keyframes gradient-pan {
	0% { background-position: 0% 50%; }
	100% { background-position: 200% 50%; }
}
@keyframes marquee-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes scroll-dot {
	0% { transform: translateY(0); opacity: 1; }
	70% { transform: translateY(18px); opacity: 0; }
	100% { opacity: 0; }
}
@keyframes pulse-ring {
	0% { box-shadow: 0 0 0 0 rgba(245,166,35,.45); }
	100% { box-shadow: 0 0 0 18px rgba(245,166,35,0); }
}