/* ==========================================================================
   premium.css — Flowcraft Premium 3D Veredelung
   Ergaenzt die bestehende inline-CSS aus index.html, ueberschreibt nichts.
   Brand-Tokens: --bg (#000), --fg (#FFF), --muted (#999), --accent (#FFF)
   bleiben unangetastet. Hier nur additive Layer.
   ========================================================================== */

:root {
  --premium-fg-soft: #F7F7F5;
  --premium-graphite: #2A2A2A;
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-slow: 420ms;
  --dur-med: 280ms;
  --dur-fast: 180ms;
}

/* Hero-Canvas: dezenter Blueprint hinter Headline */
#hero-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: screen;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
#hero-3d.webgl-failed { display: none; }

.hero > .hero-tag,
.hero > h1,
.hero > .hero-sub,
.hero > .hero-cta {
  position: relative;
  z-index: 2;
}

.hero-3d-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 20% 30%, var(--premium-fg-soft) 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, var(--premium-fg-soft) 1px, transparent 2px),
    radial-gradient(circle at 45% 80%, var(--premium-fg-soft) 1px, transparent 2px),
    radial-gradient(circle at 85% 25%, var(--premium-fg-soft) 1px, transparent 2px),
    linear-gradient(120deg, transparent 49.8%, var(--premium-graphite) 49.9%, var(--premium-graphite) 50.1%, transparent 50.2%);
  background-size: 200px 200px, 240px 240px, 180px 180px, 220px 220px, 100% 100%;
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero-3d-fallback { display: block; }
  #hero-3d { display: none; }
}

/* Scrollytelling-Pin */
.flow-scrolly {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: var(--bg, #000);
  border-top: 1px solid var(--premium-graphite);
  border-bottom: 1px solid var(--premium-graphite);
}
.flow-scrolly canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.flow-scrolly .scrolly-overlay {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(24px, 5vw, 60px);
  pointer-events: none;
  gap: clamp(20px, 3vw, 40px);
}

/* Top: Eyebrow + Progress-Dots */
.flow-scrolly .scrolly-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flow-scrolly .scrolly-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted, #999);
}
/* Apple-Pattern: dünne Progress-Linie statt diskreter Dots.
   Wächst smooth mit --phase-progress (0..1) per scaleX. */
.flow-scrolly .scrolly-progress {
  position: relative;
  width: clamp(120px, 18vw, 220px);
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.flow-scrolly .scrolly-progress::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--premium-fg-soft);
  transform-origin: left center;
  transform: scaleX(var(--phase-progress, 0));
  transition: transform 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* Dots existieren noch im DOM, werden aber unsichtbar — Linie übernimmt */
.flow-scrolly .scrolly-progress .dot { display: none; }

/* Stage: linke + rechte Seitenliste, Mitte ist Canvas */
.flow-scrolly .scrolly-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr minmax(180px, 1fr);
  align-items: center;
}
/* Apple-Pattern: Blur-Defokus statt Hide. Element bleibt visuell prsesent,
   verschiebt nur den Fokus. Cubic-bezier 0.32/0.72/0/1 = iOS-Spring. */
.flow-scrolly .scrolly-side {
  opacity: 0.3;
  filter: blur(4px);
  transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1),
              filter 600ms cubic-bezier(0.32, 0.72, 0, 1);
}
.flow-scrolly .scrolly-side.is-active {
  opacity: 1;
  filter: blur(0);
}
.flow-scrolly .scrolly-outputs {
  text-align: right;
  grid-column: 3;
}

/* Scrolly Mitte: vier Modul-Karten als visuelle Hauptebene */
.flow-scrolly .scrolly-modules {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.5vw, 22px);
  pointer-events: auto;
  padding: 0 clamp(16px, 2vw, 32px);
}
/* Apple-Pattern: gemeinsamer Blur-Crossfade auf den Container,
   keine Cascade-Stagger (laut Apple Marketing-Pages: alles auf einmal,
   sehr ruhig). */
.flow-scrolly .scrolly-modules {
  opacity: 0.3;
  filter: blur(4px);
  transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1),
              filter 600ms cubic-bezier(0.32, 0.72, 0, 1);
}
.flow-scrolly .scrolly-modules.is-active {
  opacity: 1;
  filter: blur(0);
}
.flow-scrolly .mod-card {
  position: relative;
  padding: clamp(16px, 1.5vw, 26px) clamp(18px, 1.6vw, 28px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(10,10,10,0.45);
}
.flow-scrolly .mod-card .mod-num {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--muted, #999);
  font-weight: 500;
  margin-bottom: 10px;
}
.flow-scrolly .mod-card .mod-name {
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--premium-fg-soft);
  margin-bottom: 4px;
}
.flow-scrolly .mod-card .mod-sub {
  font-size: clamp(11px, 0.9vw, 13px);
  color: var(--muted, #999);
  line-height: 1.4;
}

@media (max-width: 1023px) {
  .flow-scrolly .scrolly-modules { grid-column: 1; grid-template-columns: 1fr 1fr; padding: 0; }
}
@media (max-width: 599px) {
  .flow-scrolly .scrolly-modules { grid-template-columns: 1fr; }
}
.flow-scrolly .scrolly-side .side-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted, #999);
  margin-bottom: 14px;
}
.flow-scrolly .scrolly-side ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.flow-scrolly .scrolly-side li {
  font-size: clamp(13px, 1.05vw, 16px);
  color: var(--premium-fg-soft);
  opacity: 0.7;
  line-height: 1.4;
}
.flow-scrolly .scrolly-outputs li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--premium-fg-soft);
  margin-right: 10px;
  vertical-align: middle;
}
.flow-scrolly .scrolly-inputs li::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--premium-graphite);
  margin-left: 10px;
  vertical-align: middle;
}

/* Bottom: Phase-Headlines (gestapelt, nur eine sichtbar) + Phase-Pill */
.flow-scrolly .scrolly-bottom {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}
.flow-scrolly .scrolly-headlines {
  position: relative;
  flex: 1;
  min-height: clamp(60px, 8vw, 110px);
}
.flow-scrolly .scrolly-headlines h2 {
  position: absolute;
  inset: 0;
  margin: 0;
  font-size: clamp(28px, 4.6vw, 64px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--premium-fg-soft);
  max-width: 22ch;
  /* Apple-Pattern: Blur-In statt Slide. Headline materialisiert sich. */
  opacity: 0;
  filter: blur(8px);
  transform: translateY(0);
  transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1),
              filter 600ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: opacity, filter;
}
.flow-scrolly .scrolly-headlines h2.active {
  opacity: 1;
  filter: blur(0);
}
.flow-scrolly .scrolly-headlines h2 span {
  display: block;
  font-size: clamp(13px, 1.1vw, 17px);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--muted, #999);
  margin-top: 8px;
  max-width: 38ch;
}
.flow-scrolly .phase-pill {
  /* Versteckt — Phase-Indikation wird ausreichend von Progress-Dots + Headline geleistet.
     Pill war eine redundante dritte Phase-Anzeige und sorgte fuer visuelle Unruhe. */
  display: none !important;
}

/* Reduced-Motion: alle Elemente direkt sichtbar */
@media (prefers-reduced-motion: reduce) {
  .flow-scrolly .scrolly-side,
  .flow-scrolly .scrolly-headlines h2 {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 1023px) {
  .flow-scrolly .scrolly-stage { grid-template-columns: 1fr; }
  .flow-scrolly .scrolly-outputs { grid-column: 1; text-align: left; }
  .flow-scrolly .scrolly-outputs li::before { display: none; }
}

@media (max-width: 767px) {
  .flow-scrolly { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .flow-scrolly { height: auto; min-height: 60vh; }
  .flow-scrolly canvas { display: none; }
}

/* Navigation: Glas-/Graphit-Tiefe ab Scroll */
nav.nav {
  transition: background var(--dur-med) var(--ease-soft),
              padding var(--dur-med) var(--ease-soft),
              backdrop-filter var(--dur-med) var(--ease-soft),
              border-color var(--dur-med) var(--ease-soft);
}
nav.nav.nav-compact {
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
@media (prefers-reduced-motion: reduce) {
  nav.nav { transition: none; }
}

/* Service-Card Reveal-on-Scroll mit Stagger.
   .js-ready-Prefix sorgt dafuer dass bei deaktiviertem JS die Cards
   sichtbar bleiben (Fail-Safe). */
.js-ready .service {
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: opacity;
}
.js-ready .service.is-revealed { opacity: 1; }
.js-ready .service[data-rev-idx="0"].is-revealed { transition-delay: 0ms; }
.js-ready .service[data-rev-idx="1"].is-revealed { transition-delay: 80ms; }
.js-ready .service[data-rev-idx="2"].is-revealed { transition-delay: 160ms; }
.js-ready .service[data-rev-idx="3"].is-revealed { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
  .js-ready .service { opacity: 1 !important; transition: none !important; }
}

/* Card-Tilt */
[data-tilt] {
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform var(--dur-med) var(--ease-spring),
              border-color var(--dur-med) var(--ease-soft),
              box-shadow var(--dur-med) var(--ease-soft);
  --card-glow-x: 50%;
  --card-glow-y: 50%;
}
[data-tilt]::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    220px circle at var(--card-glow-x) var(--card-glow-y),
    rgba(247, 247, 245, 0.06),
    transparent 60%
  );
  opacity: 0;
  transition: opacity var(--dur-med) var(--ease-soft);
  pointer-events: none;
}
[data-tilt]:hover::after { opacity: 1; }
[data-tilt]:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset,
              0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt] { transition: none; transform: none !important; }
  [data-tilt]::after { display: none; }
}

/* Magnetische Buttons */
[data-magnetic] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform var(--dur-med) var(--ease-spring),
              border-color var(--dur-med) var(--ease-soft);
  will-change: transform;
}
[data-magnetic]::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, 0.08);
  pointer-events: none;
  transition: border-color var(--dur-med) var(--ease-soft);
}
[data-magnetic]:hover::after { border-color: rgba(255, 255, 255, 0.28); }
@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transform: none !important; transition: none; }
}

/* Projekt-Mockups: gestapelte 3D-Ebenen */
[data-premium-mockup] {
  transform-style: preserve-3d;
  perspective: 1200px;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  [data-premium-mockup] { transform: none !important; opacity: 1 !important; }
}

/* Cursor-Refine */
#cursorDot {
  transition: width var(--dur-med) var(--ease-soft),
              height var(--dur-med) var(--ease-soft),
              opacity var(--dur-med) var(--ease-soft);
}
#cursorDot.cursor-wide {
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  background: rgba(247, 247, 245, 0.12);
  border: 1px solid rgba(247, 247, 245, 0.4);
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  #cursorDot { display: none !important; }
}

/* Nav-Logo: FCN-Monogramm (ersetzt Wortmarke nur in Nav, Footer behaelt flowcraft.) */
a.logo.logo-fcn {
  display: inline-flex;
  align-items: center;
  padding: 0;
  text-decoration: none;
  line-height: 0;
}
a.logo.logo-fcn img {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  object-fit: contain;
  transition: opacity var(--dur-med) var(--ease-soft);
}
a.logo.logo-fcn:hover img { opacity: 0.85; }
nav.nav.nav-compact a.logo.logo-fcn img { width: 28px; height: 28px; flex-basis: 28px; }

/* Service-Card SVG Mini-Grafiken */
.svc-mini {
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  color: var(--premium-fg-soft);
  opacity: 0.78;
  transition: opacity var(--dur-med) var(--ease-soft),
              transform var(--dur-med) var(--ease-spring);
}
[data-tilt]:hover .svc-mini {
  opacity: 1;
  transform: translateY(-2px);
}

/* A11y: Fokus-Ringe sichtbar trotz 3D-Layern */
:focus-visible {
  outline: 2px solid var(--premium-fg-soft);
  outline-offset: 4px;
  border-radius: 4px;
}

/* prefers-reduced-motion Master-Switch */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
}