/* ============================================================================
   Motion-Website-Werkstatt — Basis-Stylesheet
   Design-Tokens pro Projekt in :root anpassen (Quelle: briefing/brand.md).
   ========================================================================== */

:root {
  /* Marken-Tokens — PRO PROJEKT SETZEN */
  --color-bg: #0e1526;          /* dunkler Seitenhintergrund */
  --color-surface: #1a2540;     /* Karten/Flächen */
  --color-text: #f5f7fb;
  --color-text-dim: #a8b3cc;
  --color-accent: #d9a441;      /* CTA/Highlights */
  --font-head: "Segoe UI", system-ui, sans-serif;
  --font-body: "Segoe UI", system-ui, sans-serif;
  --max-width: 1200px;
  --radius: 20px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; } /* Lenis übernimmt; Fallback bleibt nativ */
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas { max-width: 100%; display: block; }

h1, h2, h3 { font-family: var(--font-head); line-height: 1.12; margin: 0 0 0.4em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.5rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem); }
p  { margin: 0 0 1em; color: var(--color-text-dim); font-size: clamp(1rem, 1.4vw, 1.2rem); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.8rem; color: var(--color-accent); font-weight: 700; }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
section { position: relative; padding: clamp(64px, 12vh, 140px) 0; }

/* --- Sequenz-Container (Canvas-Scrubbing) --------------------------------- */
.seq { position: relative; overflow: hidden; border-radius: var(--radius); }
.seq canvas, .seq img { width: 100%; height: 100%; object-fit: cover; }
.seq-full { border-radius: 0; }
.seq-full, .seq-full canvas { height: 100vh; }

/* --- Hero ------------------------------------------------------------------ */
.hero { padding: 0; min-height: 100vh; display: grid; }
.hero .seq { grid-area: 1 / 1; }
.hero-copy {
  grid-area: 1 / 1; z-index: 2; align-self: end;
  padding: clamp(24px, 6vh, 80px) clamp(20px, 4vw, 48px);
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
}

/* --- Sticky-Story ------------------------------------------------------------ */
.story-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.story-visual { position: sticky; top: 10vh; height: 80vh; }
.story-visual .seq, .story-visual img { height: 100%; }
.story-steps .step { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; opacity: 0.25; transition: opacity 0.4s; }
.story-steps .step.is-active { opacity: 1; }

/* --- Feature-Karten ------------------------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.card { background: var(--color-surface); border-radius: var(--radius); padding: 28px; }
.card img { border-radius: calc(var(--radius) - 8px); margin-bottom: 18px; aspect-ratio: 4/3; object-fit: cover; }

/* --- Medien-Bühnen ---------------------------------------------------------------- */
.media-stage { overflow: hidden; border-radius: var(--radius); }
.media-stage img, .media-stage video { width: 100%; object-fit: cover; will-change: transform; }

/* --- Horizontal-Galerie -------------------------------------------------------------- */
[data-hscroll] { overflow: hidden; padding: 0; height: 100vh; display: flex; align-items: center; }
.hscroll-track { display: flex; gap: 24px; padding: 0 8vw; will-change: transform; }
.hscroll-track > * { flex: 0 0 min(70vw, 620px); }

/* --- CTA ---------------------------------------------------------------------------- */
.btn {
  display: inline-block; padding: 16px 36px; border-radius: 999px;
  background: var(--color-accent); color: #14192b; font-weight: 800; font-size: 1.05rem;
  text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); }

/* --- Reveal-Grundzustand (motion.js animiert) ------------------------------------------- */
html:not(.reduced-motion) [data-reveal] { opacity: 0; visibility: hidden; }

/* --- Responsive ---------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-visual { position: relative; top: 0; height: 48vh; }
  .story-steps .step { min-height: 0; padding: 32px 0; opacity: 1; }
}