/* =====================================================================
   Startseite – Hero „Zeitstrahl“ (Variante 1A, von Röfe gewählt, 06.11.2026)
   Altes Mannschaftsfoto (links, entsättigt) geht in der Mitte weich in die
   Baustelle von heute über (rechts). Beim Laden fließt die Farbe von rechts
   ins heutige Foto, an der Naht steigt Dampf auf, „1895“ zählt hoch.
   Weiße Schrift auf dunklem Schattenverlauf. Bewegung: js/hero-zeitstrahl.js.
   Ersetzt .hero-photo-frame in .hero-stage; die Kennzahlenleiste bleibt.
   ===================================================================== */

@property --farbe {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.hx {
  --hx-text-w: clamp(360px, 34vw, 560px);
  --naht-a: 36%;      /* hier beginnt das heutige Foto */
  --naht-b: 64%;      /* hier endet das alte Foto */
  --winkel: 90deg;    /* Richtung des Übergangs (90deg = senkrecht) */
  position: relative;
  z-index: 0;
  min-height: max(620px, calc(100svh - var(--nav-height)));
  background: #141414;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Text ---------- */

.hx__text {
  position: relative;
  z-index: 6;
  box-sizing: border-box;
  width: calc(var(--hx-text-w) + var(--container-pad));
  padding: clamp(72px, 15vh, 170px) 0 64px var(--container-pad);
}

.hx__eyebrow {
  margin: 0 0 18px;
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.hx__title {
  margin: 0 0 22px;
  font-weight: var(--fw-title);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-page-title);
  font-size: clamp(2.6rem, 1.2rem + 4.2vw, 5.4rem);
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.35);
}

.hx__line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}

.hx__line > span { display: block; }

.hx__desc {
  margin: 0 0 30px;
  max-width: 34ch;
  font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.08rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

.zs-aktionen {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Weißer Zweitlink für dunklen Grund */
.zs-btn-hell {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.5);
  line-height: 1.8;
}
.zs-btn-hell:hover { border-color: #fff; }

/* ---------- Bildfläche ---------- */

.hx__visual {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: #141414;
  overflow: hidden;
}

.hx__visual img {
  user-select: none;
  -webkit-user-drag: none;
}

/* Ebenen füllen die ganze Fläche, die Bilder darin sitzen links bzw. rechts */
.zs-ebene {
  position: absolute;
  inset: -16px -28px;
  will-change: transform;
}

.zs-ebene img {
  position: absolute;
  top: 0;
  height: 100%;
  object-fit: cover;
}

.zs-alt img { left: 0; width: 70%; object-position: 32% 45%; }
.zs-neu img { right: 0; width: 70%; object-position: 45% 50%; }

.zs-alt {
  -webkit-mask-image: linear-gradient(var(--winkel), #000 var(--naht-a), transparent var(--naht-b));
          mask-image: linear-gradient(var(--winkel), #000 var(--naht-a), transparent var(--naht-b));
}

.zs-neu {
  -webkit-mask-image: linear-gradient(var(--winkel), transparent var(--naht-a), #000 var(--naht-b));
          mask-image: linear-gradient(var(--winkel), transparent var(--naht-a), #000 var(--naht-b));
}

/* Altes Foto: einheitlich entsättigt, leicht warm */
.hx-alt { filter: grayscale(1) sepia(0.28) contrast(1.08) brightness(0.98); }

/* Heutiges Foto: Graufassung darunter, Farbfassung darüber; deren Maske
   (--farbe) lässt die Farbe beim Laden von rechts nach links einfließen */
.zs-neu .zs-grau { filter: grayscale(1) sepia(0.2) contrast(1.05) brightness(0.9); }
.zs-neu .zs-farbe {
  --farbe: 0%;
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--farbe) - 18%), transparent var(--farbe));
          mask-image: linear-gradient(to left, #000 calc(var(--farbe) - 18%), transparent var(--farbe));
}
/* ohne JS bzw. bei „Bewegung reduzieren“ gleich in Farbe */
html:not(.hx-js) .zs-neu .zs-farbe { --farbe: 120%; }

.zs-dampf {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Schatten hinter dem Text, oben ein leichter Verlauf für die Schilder */
.zs-schatten {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 12, 12, 0.76) 0%, rgba(12, 12, 12, 0.5) 30%, rgba(12, 12, 12, 0.1) 50%, rgba(12, 12, 12, 0) 60%),
    linear-gradient(to top, rgba(0, 0, 0, 0.38), rgba(0, 0, 0, 0) 32%);
}
.zs-schatten::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 24%;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0));
}

/* Filmkorn – kaschiert die Restunschärfe der Fotos und verbindet Alt und Neu */
.hx-korn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: hx-korn 0.9s steps(6) infinite;
}

@keyframes hx-korn {
  0%   { background-position: 0 0; }
  20%  { background-position: -37px 29px; }
  40%  { background-position: 41px -53px; }
  60%  { background-position: -71px -17px; }
  80%  { background-position: 59px 47px; }
  100% { background-position: 0 0; }
}

/* „← Damals | Heute →“: weiße Schrift, rot unterstrichen, oben an der Naht */
.zs-schild {
  position: absolute;
  z-index: 6;
  top: 24px;
  padding: 0 0 7px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.55), 0 1px 14px rgba(0, 0, 0, 0.7);
}
.zs-schild::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--color-accent);
  box-shadow: 0 0 10px rgba(227, 6, 19, 0.45);
}
.zs-schild--alt { right: calc(50% + 14px); }
.zs-schild--neu { left: calc(50% + 14px); }

/* 1895 senkrecht am rechten Rand */
.zs-jahr {
  position: absolute;
  z-index: 6;
  right: clamp(12px, 2vw, 36px);
  bottom: clamp(24px, 5vh, 60px);
  margin: 0;
  font-family: var(--font-num);
  font-weight: 600;
  font-size: clamp(6rem, 12vw, 15rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: #fff;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.35);
}

/* ---------- Einblendung: Startzustände nur mit JS und erlaubter Bewegung ---------- */

.hx-js .hx [data-ein] { opacity: 0; }
.hx-js .hx .hx__line > span { transform: translateY(105%); }

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

/* ---------- Schmale Bildschirme: Text über dem Bild, Bild über volle Breite ---------- */

@media (max-width: 900px) {
  .hx {
    min-height: 0;
    height: max(640px, calc(100svh - var(--nav-height)));
  }
  .hx__text {
    width: auto;
    padding: clamp(72px, 15vh, 170px) var(--container-pad) 32px;
  }
  .zs-alt img, .zs-neu img { width: 100%; }
  .zs-schatten {
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.42) 60%, rgba(10, 10, 10, 0.65) 100%);
  }
  .zs-jahr { font-size: 22vw; }
}