/* Startseite: Hero (PROJ-4). Weitere Sektionen (Leistungen, Referenzen, Über mich) folgen mit PROJ-5/6/8.
   Der Effekt wird über zwei Variablen gesteuert, die hero.js setzt: --p (Scroll-Fortschritt 0–1) und --e (weich beschleunigt).
   Ohne JavaScript, mit „Bewegung reduzieren“ und unter 1024 px gilt der Endzustand (--p: 1, --e: 1) bzw. das mobile Layout. */

.hero {
  --hero-text-w: clamp(340px, 40vw, 520px);
  --hero-edge: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
  --hero-frame-left: calc(var(--hero-edge) + var(--hero-text-w) + var(--space-8));
  --hero-frame-top: calc(var(--header-top) + var(--header-h) + var(--space-4));
  --hero-frame-pad: var(--space-6);
  --p: 1;
  --e: 1;
  position: relative;
}

/* ───────── Mobil & Tablet hochkant (< 1024 px): einfache Reihenfolge, Standbild als Karte, kein Video ───────── */
.hero__sticky {
  display: flex; flex-direction: column; gap: var(--space-8);
  max-width: calc(var(--container-max) + 2 * var(--container-pad)); margin-inline: auto;
  padding: calc(var(--header-top) + var(--header-h) + var(--space-10)) var(--container-pad) var(--space-12);
}
.hero__content { order: 1; }
.hero__media {
  order: 2; position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--radius-xl); background: var(--cream-200); box-shadow: var(--shadow-md);
}
.hero__cards { order: 3; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.hero__shadow, .hero__veil, .hero__video-slot, .hero__toggle, .hero__scroll { display: none; }

.hero__clip, .hero__zoom { position: absolute; inset: 0; }
.hero__parallax { position: absolute; inset: -8% 0; }
.hero__still, .hero__still img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero__title { margin-top: var(--space-5); font-size: clamp(2.25rem, 10.4vw, 3.75rem); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.hero__title span { display: block; }
.hero__lead { max-width: 440px; margin-top: var(--space-5); }
.hero__actions { margin-top: var(--space-8); }

/* ───────── Platzhalter (bis Video und Standbild geliefert sind) ───────── */
.hero__placeholder { position: absolute; inset: 0; overflow: hidden; background: var(--cream-200); }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(10px); animation: hero-float 14s ease-in-out infinite alternate; }
.hero__blob--a { left: 48%; top: 8%; width: 52%; aspect-ratio: 1; background: radial-gradient(circle, var(--ember-400) 0%, transparent 62%); }
.hero__blob--b { left: 62%; top: 42%; width: 38%; aspect-ratio: 1; background: radial-gradient(circle, var(--ember-600) 0%, transparent 60%); animation-duration: 11s; animation-delay: -4s; }
.hero__blob--c { left: -8%; top: 50%; width: 40%; aspect-ratio: 1; background: radial-gradient(circle, var(--sky-300) 0%, transparent 62%); animation-duration: 17s; animation-delay: -8s; }
.hero__placeholder-label {
  position: absolute; right: var(--space-6); bottom: var(--space-4);
  color: var(--navy-600); font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
@keyframes hero-float { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4%, 3%) scale(1.08); } 100% { transform: translate(3%, -4%) scale(.96); } }

/* ───────── Referenz-Karten ───────── */
.hero__cards { list-style: none; }
.hero__card .stat-card { height: 100%; background: var(--surface-glass-strong); }

/* ───────── Desktop (ab 1024 px): Vollbild, Rahmen rechts, Karten gestapelt ───────── */
@media (min-width: 1024px) {
  .hero__sticky { display: block; position: relative; max-width: none; margin: 0; padding: 0; height: 100vh; height: 100dvh; min-height: 640px; overflow: hidden; }
  .hero__title { font-size: clamp(2.5rem, 4.4vw, 4.5rem); }

  .hero__media { position: absolute; inset: 0; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  .hero__shadow {
    display: block; position: absolute;
    inset: calc(var(--e) * var(--hero-frame-top)) calc(var(--e) * var(--hero-frame-pad)) calc(var(--e) * var(--hero-frame-pad)) calc(var(--e) * var(--hero-frame-left));
    border-radius: calc(var(--e) * 36px); box-shadow: var(--shadow-lg); opacity: var(--e);
  }
  .hero__clip {
    overflow: hidden;
    clip-path: inset(calc(var(--e) * var(--hero-frame-top)) calc(var(--e) * var(--hero-frame-pad)) calc(var(--e) * var(--hero-frame-pad)) calc(var(--e) * var(--hero-frame-left)) round calc(var(--e) * 36px));
  }
  .hero__zoom { transform: scale(calc(1.18 - 0.18 * var(--e))); transform-origin: 60% 50%; }
  .hero__parallax { inset: 0; transform: none !important; will-change: auto; }

  .hero__video-slot { display: block; position: absolute; inset: 0; }
  .hero__video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: clamp(0, calc((0.93 - var(--p)) * 14), 1); }
  .hero__placeholder-label { left: calc(var(--hero-frame-left) + var(--space-6)); right: auto; bottom: calc(var(--hero-frame-pad) + var(--space-5)); }

  .hero__veil {
    display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--bg-page) 0%, var(--bg-page) 24%, transparent 64%);
    opacity: calc((1 - var(--e)) * 0.94);
  }

  .hero__content {
    position: absolute; z-index: 3; top: 0; bottom: 0; left: var(--hero-edge); width: var(--hero-text-w);
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding-block: calc(var(--header-top) + var(--header-h) + var(--space-8)) var(--space-8);
    transform: translateY(calc(var(--e) * -30px));
  }

  .hero__cards {
    position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 14px; width: 260px;
    right: calc(var(--hero-frame-pad) + var(--space-6)); bottom: calc(var(--hero-frame-pad) + var(--space-12));
  }
  .hero__card { opacity: clamp(0, calc((var(--p) - var(--d, 0.3)) * 3), 1); transform: translateY(calc((1 - var(--e)) * var(--rise, 240px))); }
  /* Tastatur: eine fokussierte Karte ist immer sichtbar, auch bevor sie beim Scrollen aufsteigt (WCAG 2.4.7) */
  .hero__card:focus-within { opacity: 1; transform: none; }
  .hero__card:nth-child(1) { --d: 0.3; --rise: 240px; }
  .hero__card:nth-child(2) { --d: 0.4; --rise: 300px; }
  .hero__card:nth-child(3) { --d: 0.5; --rise: 360px; }

  .hero__toggle { display: inline-flex; position: absolute; z-index: 4; top: calc(var(--hero-frame-top) + var(--space-4)); right: calc(var(--hero-frame-pad) + var(--space-4)); --icon-btn-size: 44px; }
  .hero__toggle[hidden] { display: none; }
}

/* ───────── Bewegungsmodus: klebender Hero, Fortschritt steuert den Effekt ───────── */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .js .hero { --p: 0; --e: 0; height: 230vh; }
  .js .hero__sticky { position: sticky; top: 0; }
  /* Karten steigen beim Scrollen auf: erst anklickbar, wenn sichtbar (is-live setzt hero.js), oder wenn per Tastatur fokussiert */
  .js .hero__card { pointer-events: none; } /* unsichtbare Karten nicht anklickbar … */
  .js .hero__card.is-live, .js .hero__card:focus-within { pointer-events: auto; } /* … sobald sichtbar (hero.js) bzw. per Tastatur fokussiert */
  .js .hero__scroll {
    display: flex; position: absolute; z-index: 4; left: 50%; bottom: var(--space-6); transform: translateX(-50%);
    align-items: center; gap: 10px; color: var(--text-muted); font-size: 12.5px; text-decoration: none;
    opacity: clamp(0, calc(1 - var(--p) * 4), 1);
  }
  .js .hero__scroll:hover { color: var(--text-strong); }
  .js .hero--hint-hidden .hero__scroll { visibility: hidden; } /* ab Fortschritt 0,25 unsichtbar → auch nicht per Tab/Klick erreichbar */
  .js .hero__scroll .icon-btn { --icon-btn-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__blob { animation: none; }
}

/* ───────── Leistungen (PROJ-5) ───────── */
.services__head { max-width: 640px; }
.services__head > * + * { margin-top: var(--space-4); }
.services__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: var(--lh-snug); letter-spacing: var(--ls-display); }
.services__grid { display: grid; gap: var(--space-5); margin-top: var(--space-12); }
.services__item .service-card { height: 100%; }
.services__trust { display: grid; gap: var(--space-6); margin-top: var(--space-6); padding: var(--space-6); }

@media (min-width: 640px) {
  .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services__item--saas, .services__item--ki-automation { grid-column: 1 / -1; }
  .services__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--space-8); }
}
@media (min-width: 1024px) {
  .services__grid { grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); }
  .services__item--saas { grid-column: 1; grid-row: 1 / span 2; }
  .services__item--website, .services__item--app { grid-column: auto; }
  .services__item--ki-automation { grid-column: 2 / span 2; }
  .services__item--saas .service-card { padding: var(--space-8) var(--space-8) var(--space-10); }
  .services__item--saas .service-card__title { font-size: 28px; line-height: 1.15; }
  .services__item--saas .service-card__text { font-size: 17px; }
  .services__trust { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ───────── Ausgewählte Projekte (PROJ-6) ───────── */
.home-refs__head > * + * { margin-top: var(--space-4); }
.home-refs__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: var(--lh-snug); letter-spacing: var(--ls-display); }
.home-refs__grid { margin-top: var(--space-10); }
.home-refs__more { display: flex; justify-content: center; margin-top: var(--space-10); }