/* ==========================================================================
   OsnaKI – Designsystem
   Selbst gehostete Schriften, CSS Custom Properties, Basiskomponenten.
   ========================================================================== */

/* ---- Schriften (selbst gehostet, WOFF2) -------------------------------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/fraunces-variable.woff2') format('woff2-variations'),
       url('/assets/fonts/fraunces-variable.woff2') format('woff2');
  font-variation-settings: 'opsz' 40;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('/assets/fonts/manrope-variable.woff2') format('woff2-variations'),
       url('/assets/fonts/manrope-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/spacemono-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/spacemono-700.woff2') format('woff2');
}

/* ---- Design-Tokens ------------------------------------------------------
   Dunkles System (Premium-Tech-Ästhetik). Dominante Markenfarbe: Ink-Violet
   (edel, eigenständig – kein generisches Startup-Blau). Neutrale Flächen in
   warmem Anthrazit. Ein präziser Akzent (Signalkoralle) ausschließlich für
   CTAs und aktive Zustände.
   ------------------------------------------------------------------------- */
:root {
  /* Marke */
  --brand-950: #0B0A12;   /* Basis-Hintergrund */
  --brand-900: #14121F;   /* Flächen (Cards, Header) */
  --brand-800: #1D1A2E;   /* erhöhte Flächen */
  --brand-700: #2B2645;   /* Rahmen / Trennlinien */
  --brand-500: #4B3F8C;   /* dominante Markenfarbe */
  --brand-400: #6E5CC4;   /* Markenfarbe hell, für Gradients */
  --brand-300: #9C8CF0;   /* Highlights, Icons, Links */

  --accent-500: #FF6B4A;  /* präziser Akzent: CTAs */
  --accent-400: #FF8A6B;  /* Akzent hover */
  --accent-600: #E8552F;  /* Akzent active */

  --ink-0:   #FBFAFF;     /* Primärtext auf Dunkel */
  --ink-100: #E7E4F3;     /* Sekundärtext */
  --ink-300: #A9A2C7;     /* Fließtext gedämpft */
  --ink-500: #756D96;     /* Meta / Captions */

  --success-500: #3FCF8E;
  --line-soft: rgba(231, 228, 243, 0.10);
  --line-strong: rgba(231, 228, 243, 0.18);

  /* Typografie */
  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  --step-3:  clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem);
  --step-4:  clamp(2.4rem, 1.8rem + 2.6vw, 3.6rem);
  --step-5:  clamp(3rem, 2.1rem + 4vw, 5rem);

  /* Abstände */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;
  --radius-full: 999px;

  --shadow-soft: 0 20px 60px -30px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px rgba(156, 140, 240, 0.15), 0 30px 80px -20px rgba(75, 63, 140, 0.45);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur-base: 400ms;
  --dur-slow: 900ms;

  --container: 1240px;
  --container-narrow: 800px;
}

/* ---- Reset --------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body {
  margin: 0;
  background: var(--brand-950);
  color: var(--ink-100);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

/* Sichtbarer Tastatur-Fokus */
:focus-visible {
  outline: 2px solid var(--brand-300);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Typografie-Rollen ---------------------------------------------------*/
h1, h2, h3, .font-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--ink-0);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
.eyebrow, .font-mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--brand-300);
  margin-bottom: var(--space-s);
}
.eyebrow::before {
  content: '';
  width: 18px;
  height: 1px;
  background: var(--accent-500);
}
.lede { font-size: var(--step-1); color: var(--ink-300); line-height: 1.6; }
.text-muted { color: var(--ink-300); }

/* ---- Layout ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-m);
}
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-2xl); position: relative; }
.section--tight { padding-block: var(--space-xl); }
@media (max-width: 640px) {
  .section { padding-block: var(--space-xl); }
}

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.9em 1.6em;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn-primary {
  background: var(--accent-500);
  color: #1A0E08;
  box-shadow: 0 12px 30px -10px rgba(255, 107, 74, 0.55);
}
.btn-primary:hover { background: var(--accent-400); transform: translateY(-2px); box-shadow: 0 16px 36px -8px rgba(255, 107, 74, 0.65); }
.btn-primary:active { background: var(--accent-600); transform: translateY(0); }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--ink-0);
}
.btn-ghost:hover { border-color: var(--brand-300); background: rgba(156, 140, 240, 0.08); }
.btn-block { width: 100%; }

/* ---- Karten -------------------------------------------------------------*/
.card {
  background: linear-gradient(180deg, var(--brand-900), var(--brand-800));
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-l);
  padding: var(--space-l);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

/* ---- Scroll-Reveal (per IntersectionObserver aktiviert) -----------------*/
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Visually hidden (a11y) ----------------------------------------------*/
.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;
}
.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -60px;
  background: var(--accent-500);
  color: #1A0E08;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-s);
  font-weight: 700;
  z-index: 999;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-s); }