/* ═══════════════════════════════════════════════════════
   SHK-NORD GmbH — Bewegung und Effekte
   Alles hier ist bei prefers-reduced-motion abgeschaltet.
═══════════════════════════════════════════════════════ */

/* ── Hero: langsame Bildfahrt (Ken Burns) ─────────────── */
.hero-bild {
  animation: bildfahrt 30s ease-in-out infinite alternate;
  transform-origin: 62% 45%;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
@keyframes bildfahrt {
  from { transform: scale3d(1.04, 1.04, 1); }
  to   { transform: scale3d(1.14, 1.14, 1); }
}

/* Leuchtender Farbschleier, der langsam wandert */
.hero-schleier {
  position: absolute;
  inset: -30%;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(38% 42% at 18% 28%, rgba(42, 76, 187, .55) 0%, transparent 70%),
    radial-gradient(34% 38% at 78% 72%, rgba(226, 112, 58, .22) 0%, transparent 70%);
  animation: schleier 22s ease-in-out infinite alternate;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@keyframes schleier {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

/* Auftritt beim Laden, Zeile für Zeile */
.auftritt > * {
  opacity: 0;
  transform: translateY(26px);
  animation: auftritt .9s var(--kurve) forwards;
}
.auftritt > *:nth-child(1) { animation-delay: .15s; }
.auftritt > *:nth-child(2) { animation-delay: .28s; }
.auftritt > *:nth-child(3) { animation-delay: .41s; }
.auftritt > *:nth-child(4) { animation-delay: .54s; }
.auftritt > *:nth-child(5) { animation-delay: .67s; }
@keyframes auftritt { to { opacity: 1; transform: none; } }

/* Wort im Titel, farbig unterstrichen */
.strich {
  position: relative;
  white-space: nowrap;
}
@media (max-width: 560px) { .strich { white-space: normal; } }
.strich::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: .06em;
  height: .11em;
  background: var(--akzent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  animation: strich 1s var(--kurve) 1.1s forwards;
}
@keyframes strich { to { transform: scaleX(1); } }

/* Scroll-Hinweis unten im Hero */
.scrollhinweis {
  position: absolute;
  left: 50%;
  bottom: clamp(7rem, 12vh, 9rem);
  z-index: 3;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .75);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.scrollhinweis span {
  width: 1px;
  height: 46px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .8), transparent);
  animation: scrollhinweis 2.2s ease-in-out infinite;
}
@keyframes scrollhinweis {
  0%, 100% { opacity: .3; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;  transform: scaleY(1);  transform-origin: top; }
}

/* ── Laufende Markenleiste ────────────────────────────── */
.laufband {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.laufband-spur {
  display: flex;
  align-items: center;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  width: max-content;
  animation: laufband 38s linear infinite;
}
.laufband:hover .laufband-spur { animation-play-state: paused; }
@keyframes laufband { to { transform: translateX(-50%); } }

/* ── Zahlen, die hochzählen ───────────────────────────── */
.zaehler { font-variant-numeric: tabular-nums; }

/* ── Leistungskarten: Bild zoomt, Farbschleier ────────── */
.leistung { position: relative; }
.leistung .bildrahmen { position: relative; overflow: hidden; }
.leistung .bildrahmen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(2, 23, 63, .55) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}
.leistung img { transition: transform .8s var(--kurve); }
.leistung:hover img { transform: scale(1.07); }
.leistung:hover .bildrahmen::after { opacity: 1; }
.leistung:hover { transform: translateY(-6px); box-shadow: var(--schatten-hoch); }

/* ── Bild zieht beim Scrollen auf ─────────────────────── */
.aufziehen {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s var(--kurve);
}
.aufziehen.sichtbar { clip-path: inset(0 0 0 0); }

/* ── Vorher-Nachher-Regler ────────────────────────────── */
.vergleich {
  position: relative;
  border-radius: var(--radius-bild);
  overflow: hidden;
  box-shadow: var(--schatten-hoch);
  aspect-ratio: 16 / 10;
  user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}
.vergleich img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vergleich .nachher { clip-path: inset(0 0 0 50%); }
.vergleich-griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: var(--weiss);
  transform: translateX(-50%);
  box-shadow: 0 0 20px rgba(0, 0, 0, .4);
}
.vergleich-griff::after {
  content: '⇄';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pille);
  background: var(--weiss);
  color: var(--blau-700);
  font-size: 1.25rem;
  box-shadow: var(--schatten-hoch);
}
.vergleich-marke {
  position: absolute;
  top: 1rem;
  padding: .35rem .85rem;
  border-radius: var(--radius-pille);
  background: rgba(2, 23, 63, .75);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.vergleich-marke.links  { left: 1rem; }
.vergleich-marke.rechts { right: 1rem; }

/* ── Ablauf: Linie wächst beim Scrollen mit ───────────── */
.ablauf { position: relative; }
.ablauf::before {
  content: '';
  position: absolute;
  top: 1.375rem;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--ink-200);
}
.ablauf::after {
  content: '';
  position: absolute;
  top: 1.375rem;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--blau-600);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.8s var(--kurve);
}
.ablauf.sichtbar::after { transform: scaleX(1); }
@media (max-width: 899px) { .ablauf::before, .ablauf::after { display: none; } }
.schritt::before { transition: transform .5s var(--kurve), background-color .3s ease; }
.schritt:hover::before { transform: scale(1.12); background: var(--akzent); }

/* ── Große Zitat-/Bildsektion mit Parallaxe ───────────── */
.parallaxe { will-change: transform; }

/* ── Kundenstimmen als Schieber ───────────────────────── */
.stimmen-bahn {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: .5rem;
}
.stimmen-bahn::-webkit-scrollbar { display: none; }
.stimmen-bahn > * { scroll-snap-align: center; flex: 0 0 min(88vw, 24rem); }

/* ── Knopf mit Glanz ──────────────────────────────────── */
.knopf-haupt { position: relative; overflow: hidden; }
.knopf-haupt::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: left .6s var(--kurve);
}
.knopf-haupt:hover::after { left: 120%; }

/* ── FAQ: sanft aufklappen ────────────────────────────── */
.faq details[open] p { animation: aufklappen .45s var(--kurve); }
@keyframes aufklappen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ── Abschluss: Bild bewegt sich leicht ───────────────── */
.abschluss-bild { animation: bildfahrt 34s ease-in-out infinite alternate; will-change: transform; }
@keyframes verlauf {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Rücksicht auf reduzierte Bewegung ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-bild, .hero-schleier, .laufband-spur, .abschluss, .scrollhinweis span { animation: none; }
  .auftritt > * { opacity: 1; transform: none; animation: none; }
  .strich::after { transform: scaleX(1); animation: none; }
  .aufziehen { clip-path: none; transition: none; }
  .ablauf::after { transform: scaleX(1); transition: none; }
}

/* ═══ Flug durchs Haus ═══ */
.reise {
  position: relative;
  height: 420vh;                /* Scrollstrecke für vier Stationen */
  background: var(--blau-900);
  color: rgba(255, 255, 255, .85);
}
.reise-buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(6.5rem, 11vw, 9rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.reise-kopf { position: relative; z-index: 3; }
.reise-kopf h2 { color: #fff; margin: 0; }

.reise-bild {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: var(--blau-900);
}
.reise-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reise-texte { position: relative; z-index: 3; align-self: end; }
.reise-text {
  position: absolute;
  bottom: 0;
  max-width: 34rem;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--kurve), transform .6s var(--kurve);
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 23, 63, 0), rgba(2, 23, 63, .92) 40%);
  padding: 2rem 1.5rem 1rem;
  border-radius: var(--radius-bild);
}
.reise-text.aktiv { opacity: 1; transform: none; }
.reise-nummer {
  font-family: var(--schrift-display);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--akzent);
}
.reise-text h3 { color: #fff; margin: .5rem 0 .75rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.reise-text p { color: rgba(255, 255, 255, .82); margin: 0; }

.reise-punkte {
  position: absolute;
  right: clamp(1rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  gap: .75rem;
}
.reise-punkt {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pille);
  background: rgba(255, 255, 255, .28);
  transition: background-color .4s ease, transform .4s var(--kurve);
}
.reise-punkt.aktiv { background: var(--akzent); transform: scale(1.5); }

@media (max-width: 767px) {
  .reise { height: 400vh; }
  .reise-kamera { width: 165%; }
  .reise-text { padding: 3rem 1rem 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .reise { height: auto; }
  .reise-buehne { position: static; height: auto; }
  .reise-bild { position: static; }
  .reise-kamera { transform: none !important; width: 100%; }
  .reise-texte { display: grid; gap: 1.5rem; margin-top: 2rem; }
  .reise-text { position: static; opacity: 1; transform: none; background: none; padding: 0; }
  .reise-punkte { display: none; }
}

/* Kopf und Fuß der Bühne abdunkeln, damit Text immer lesbar bleibt */
.reise-buehne::before,
.reise-buehne::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
}
.reise-buehne::before {
  top: 0;
  height: 34%;
  background: linear-gradient(180deg, rgba(2, 23, 63, .96) 0%, rgba(2, 23, 63, .72) 45%, rgba(2, 23, 63, 0) 100%);
}
.reise-buehne::after {
  bottom: 0;
  height: 48%;
  background: linear-gradient(0deg, rgba(2, 23, 63, .96) 0%, rgba(2, 23, 63, .7) 40%, rgba(2, 23, 63, 0) 100%);
}
.reise-kopf .ueberzeile { color: var(--akzent); }
.reise-text { background: none; padding: 0 0 .5rem; }

/* ═══ Leistungen als Bildfolge (scrollgesteuert) ═══ */
.folge {
  position: relative;
  height: 520vh;                 /* fünf Stationen */
  background: var(--blau-900);
}
.folge-buehne {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: calc(140px + clamp(1rem, 3vh, 2.5rem)) 0 clamp(2rem, 5vh, 3.5rem);
}

.folge-platte {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s var(--kurve);
}
.folge-platte.an { opacity: 1; }
.folge-platte img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transition: transform 2.4s var(--kurve);
}
.folge-platte.an img { transform: scale(1); }
.folge-schleier {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2, 23, 63, .88) 0%, rgba(2, 23, 63, .35) 38%, rgba(2, 23, 63, .92) 100%),
    linear-gradient(90deg, rgba(2, 23, 63, .8) 0%, rgba(2, 23, 63, .1) 62%);
}

.folge-text {
  position: absolute;
  inset: auto 0 clamp(11rem, 22vh, 15rem);
  max-width: min(100%, 62rem);
  z-index: 3;
  max-width: none;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s var(--kurve), transform .7s var(--kurve);
}
.folge-platte.an .folge-text { opacity: 1; transform: none; }
.folge-nr {
  font-family: var(--schrift-display);
  font-size: .8125rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--akzent-hell);
  margin: 0 0 .75rem;
}
.folge-nr span { color: rgba(255, 255, 255, .45); font-weight: 600; }
.folge-zeile {
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin: 0 0 .5rem;
}
.folge-text h3 {
  color: #fff;
  font-size: clamp(1.9rem, 4.2vw, 3.25rem);
  line-height: 1.08;
  margin: 0 0 .875rem;
  max-width: 16ch;
}
.folge-satz {
  color: rgba(255, 255, 255, .82);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  max-width: 34rem;
  margin: 0;
}

.folge-kopf {
  position: relative;
  z-index: 4;
  grid-row: 1;
  align-self: start;
  transition: opacity .5s var(--kurve), transform .6s var(--kurve);
}
.folge-kopf.weg {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}
.folge-pille {
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #fff;
  font-weight: 700;
}
.folge-kopf h2 { color: #fff; margin: 1rem 0 0; font-size: clamp(1.75rem, 3.4vw, 2.75rem); }

.folge-leiste {
  position: absolute;
  right: clamp(1.25rem, 3vw, 2.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  display: grid;
  gap: 1.1rem;
  justify-items: end;
  text-align: right;
  max-width: 15rem;
  margin: 0;
}
.folge-leiste span {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: .75rem;
  font-size: .9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: color .35s ease, transform .35s var(--kurve);
}
.folge-leiste span:hover { color: rgba(255, 255, 255, .85); }
.folge-leiste span i {
  order: 2;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  flex-shrink: 0;
  transition: background-color .35s ease, transform .35s var(--kurve), box-shadow .35s ease;
}
.folge-leiste span.an { color: #fff; }
.folge-leiste span.an i {
  background: #fff;
  transform: scale(1.5);
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .22);
}
@media (max-width: 900px) {
  /* Kollidiert mit dem unten liegenden Bildtext — auf Mobile ausgeblendet,
     die „01 / 05“-Zählung im Text übernimmt die Fortschrittsanzeige. */
  .folge-leiste { display: none; }
}

.folge-knopf {
  position: relative;
  z-index: 4;
  grid-row: 3;
  align-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.folge-knopf p { margin: 0; font-size: .875rem; color: rgba(255, 255, 255, .6); max-width: 30rem; }

@media (max-width: 767px) {
  .folge { height: 480vh; }
  .folge-text { inset: auto 0 clamp(12rem, 26vh, 15rem); }
  .folge-leiste { gap: .25rem 1rem; font-size: .8125rem; }
  .folge-leiste span { font-size: .8125rem; }
}
@media (prefers-reduced-motion: reduce) {
  .folge { height: auto; }
  .folge-buehne { position: static; height: auto; display: grid; gap: 2rem; padding-block: var(--sektion); }
  .folge-platte { position: relative; opacity: 1; height: 60vh; }
  .folge-text { position: absolute; opacity: 1; transform: none; }
}