/* ============================================================
   GÄRTNEREI HOHN — ZEITSTRAHL
   ------------------------------------------------------------
   Zwei getrennte Bauformen. Das System wählt selbst:

   ≥ 900 px  DESKTOP — waagerecht.
             Eine Linie wächst von links nach rechts.
             Vier Stationen bauen sich nacheinander auf:
             Bild deckt sich auf, Punkt rastet ein, Jahr zählt
             sich hoch, Titel und Text folgen.

   < 900 px  MOBIL — gestapelt.
             Quadratisches Bild, darunter Jahr, Titel, Text.

   Getaktet über eine einzige Variable: --zs-takt.
   Wer es schneller oder langsamer will, ändert nur diese Zahl.
   ============================================================ */

.zeitstrahl {
  margin-top: var(--luft-s);

  --zs-takt:  .85s;    /* Abstand zwischen zwei Stationen */
  --zs-ruhe: 1.1s;     /* Dauer einer einzelnen Bewegung */
}

/* ============================================================
   ⛔ DIE LISTE WAR KEINE LISTE — behoben am 14.07.2026
   ------------------------------------------------------------
   Vorher stand im HTML:

       <ol class="zeitstrahl">
         <div class="zs__spur">      <- ein DIV mitten im OL
           <span class="zs__linie">
           <li>×4
         </div>
       </ol>

   Ein <ol> darf ausschließlich <li> enthalten. Der Screenreader
   sagte deshalb nicht mehr „Liste mit 4 Einträgen, Eintrag 1 von 4",
   sondern las vier zusammenhanglose Absätze vor. Die Firmen-
   geschichte ist aber eine Abfolge — dafür gibt es <ol>.

   axe-core, gemessen an der Live-Seite:
       🟠 list      (serious)     — <ol> ohne <li>
       🟠 listitem  (serious, 4×) — <li> ohne Liste
   WCAG 2.2 AA. BFSG-relevant.

   JETZT:
       <div class="zeitstrahl">    <- trägt .laeuft und die Takt-Variablen
         <div class="zs__spur">    <- nur noch der Bezugsrahmen für die Linie
           <span class="zs__linie">
           <ol class="zs__liste">  <- das Raster, enthält NUR <li>
             <li class="zs__stop">×4
   ============================================================ */

/* Die Spur ist jetzt nur noch der Bezugspunkt für die absolut
   gesetzte Linie. Kein Raster mehr — das ist in die Liste gewandert. */
.zs__spur {
  position: relative;
}

/* Die Liste. Sie trägt das Raster, das vorher die Spur trug. */
.zs__liste {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ------------------------------------------------------------
   DER TAKT — jetzt über eine Zählvariable, nicht über 28 Regeln
   ------------------------------------------------------------
   Vorher stand jede Verzögerung siebenmal einzeln da:
       .zs__stop:nth-child(2) …  .zs__stop:nth-child(5)
   für Stop, Bild, Bildvorhang, Punkt, Jahr, Titel und Text.
   28 Regeln, die alle dasselbe sagten.

   Und sie zählten ab 2 — weil die Linie das erste Kind war.
   Jetzt ist sie es nicht mehr, also hätten alle 28 umnummeriert
   werden müssen. Genau da entstehen Fehler.

   Stattdessen: Jede Station bekommt EINMAL ihre Nummer. Alle
   Verzögerungen rechnen damit. Eine fünfte Station braucht künftig
   eine Zeile, nicht sieben.
   ------------------------------------------------------------ */
.zs__stop:nth-child(1) { --i: 0; }
.zs__stop:nth-child(2) { --i: 1; }
.zs__stop:nth-child(3) { --i: 2; }
.zs__stop:nth-child(4) { --i: 3; }
.zs__stop:nth-child(5) { --i: 4; }   /* Reserve, falls eine Station dazukommt */

/* ============================================================
   DIE LINIE — wächst langsam von links nach rechts
   ============================================================ */
.zs__linie {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--hohn-linie);
  overflow: visible;
}
.zs__linie::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
              var(--hohn-gruen) 0%,
              var(--hohn-gruen-hell) 55%,
              var(--hohn-erde) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform calc(var(--zs-takt) * 4 + var(--zs-ruhe))
              cubic-bezier(.65, 0, .35, 1);
}
.zeitstrahl.laeuft .zs__linie::after { transform: scaleX(1); }

/* Der Lichtpunkt, der auf der Linie mitläuft */
.zs__linie::before {
  content: "";
  position: absolute; top: 50%; left: 0;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hohn-erde);
  box-shadow: 0 0 8px 3px rgba(176,80,55,.55);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
}
.zeitstrahl.laeuft .zs__linie::before {
  animation: zs-funke calc(var(--zs-takt) * 4 + var(--zs-ruhe))
             cubic-bezier(.65, 0, .35, 1) forwards;
}
@keyframes zs-funke {
  0%   { left: 0;    transform: translate(-50%,-50%) scale(0);   opacity: 0; }
  6%   { left: 2%;   transform: translate(-50%,-50%) scale(1);   opacity: 1; }
  90%  { left: 98%;  transform: translate(-50%,-50%) scale(1);   opacity: 1; }
  100% { left: 100%; transform: translate(-50%,-50%) scale(0);   opacity: 0; }
}

/* ============================================================
   EINE STATION
   ============================================================ */
.zs__stop {
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--zs-ruhe) cubic-bezier(.22,.72,.28,1),
              transform var(--zs-ruhe) cubic-bezier(.22,.72,.28,1);
}
.zeitstrahl.laeuft .zs__stop { opacity: 1; transform: none; }

/* Der Takt. Jede Station kommt einen Takt später. */
.zeitstrahl.laeuft .zs__stop { transition-delay: calc(var(--zs-takt) * var(--i)); }

/* ============================================================
   BILD — deckt sich mit einem Vorhang auf
   ============================================================ */
.zs__bild {
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--hohn-sand);
  margin-bottom: 1.5rem;
  position: relative;
}
/* Der Vorhang: fährt von unten weg */
.zs__bild::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--hohn-gruen);
  transform: scaleY(1);
  transform-origin: bottom;
  transition: transform calc(var(--zs-ruhe) * 1.1) cubic-bezier(.72, 0, .24, 1);
  z-index: 1;
}
.zeitstrahl.laeuft .zs__bild::after {
  transform: scaleY(0);
  transition-delay: calc(var(--zs-takt) * var(--i) + .1s);
}

.zs__bild img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12);
  transition: transform calc(var(--zs-ruhe) * 2) cubic-bezier(.2,.7,.3,1);
}
.zeitstrahl.laeuft .zs__bild img {
  transform: scale(1);
  transition-delay: calc(var(--zs-takt) * var(--i) + .1s);
}

.zs__stop:hover .zs__bild img { transform: scale(1.05); transition-delay: 0s; }

/* Hier stand eine Sonderregel für `img.frei`: Das Bild von Thomas
   Hohn war auf Weiß freigestellt und erzeugte einen weißen Kasten
   im Zeitstrahl. Seit Juli 2026 ist es ein echtes Foto aus dem
   Gewächshaus — es braucht keine Sonderbehandlung mehr und verhält
   sich wie die drei anderen Stationen. Regel entfernt. */

/* ============================================================
   PUNKT — rastet mit einem kleinen Ring ein
   ============================================================ */
.zs__punkt {
  position: absolute;
  left: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--hohn-weiss);
  border: 2px solid var(--hohn-linie);
  z-index: 2;
  transition: background .5s ease, border-color .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
/* Der Ring, der beim Einrasten aufploppt */
.zs__punkt::after {
  content: "";
  position: absolute; inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--hohn-gruen);
  opacity: 0;
  transform: scale(.4);
}
.zeitstrahl.laeuft .zs__punkt {
  background: var(--hohn-gruen);
  border-color: var(--hohn-gruen);
  transform: scale(1.15);
}
.zeitstrahl.laeuft .zs__punkt::after {
  animation: zs-ring 1.1s cubic-bezier(.22,.72,.28,1) forwards;
}
@keyframes zs-ring {
  0%   { opacity: .9; transform: scale(.5); }
  70%  { opacity: .25; transform: scale(2.2); }
  100% { opacity: 0;  transform: scale(2.6); }
}
.zeitstrahl.laeuft .zs__punkt,
.zeitstrahl.laeuft .zs__punkt::after {
  transition-delay: calc(var(--zs-takt) * var(--i) + .55s);
  animation-delay:  calc(var(--zs-takt) * var(--i) + .55s);
}

/* Die letzte Station bekommt Terrakotta */
.zeitstrahl.laeuft .zs__stop:last-child .zs__punkt {
  background: var(--hohn-erde);
  border-color: var(--hohn-erde);
}
.zs__stop:last-child .zs__punkt::after { border-color: var(--hohn-erde); }

/* ============================================================
   TEXT — Jahr, Titel, Beschreibung, gestaffelt
   ============================================================ */
.zs__jahr {
  font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.1rem);
  font-weight: 200;
  color: var(--hohn-gruen);
  letter-spacing: var(--sperr-eng);
  line-height: 1;
  margin-bottom: .5rem;
  font-variant-numeric: tabular-nums;

  overflow: hidden;
  display: block;
}
.zs__jahr > span {
  display: block;
  transform: translateY(105%);
  transition: transform var(--zs-ruhe) cubic-bezier(.2,.75,.25,1);
}
.zeitstrahl.laeuft .zs__jahr > span {
  transform: none;
  transition-delay: calc(var(--zs-takt) * var(--i) + .35s);
}

.zs__titel {
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--hohn-tinte);
  margin-bottom: .75rem;
  position: relative;
  padding-bottom: .6rem;
}
/* Der kleine Strich unter dem Titel wächst mit */
.zs__titel::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 2rem; height: 2px;
  background: var(--hohn-erde);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.22,.72,.28,1);
}
.zeitstrahl.laeuft .zs__titel::after {
  transform: scaleX(1);
  transition-delay: calc(var(--zs-takt) * var(--i) + .6s);
}

.zs__text {
  font-size: var(--fs-klein);
  font-weight: 300;
  color: var(--hohn-grau);
  line-height: 1.7;
  max-width: 34ch;
  opacity: 0;
  transition: opacity var(--zs-ruhe) ease;
}
.zeitstrahl.laeuft .zs__text {
  opacity: 1;
  transition-delay: calc(var(--zs-takt) * var(--i) + .7s);
}

/* ============================================================
   DESKTOP  ≥ 900 px — waagerecht
   ============================================================ */
@media (min-width: 900px) {
  .zs__linie { top: calc(1rem + 5px); }
  .zs__stop  { padding-top: 2.75rem; }
  .zs__punkt { top: 1rem; }
}

/* ============================================================
   MOBIL  < 900 px — gestapelt
   ============================================================ */
@media (max-width: 899px) {
  .zeitstrahl { --zs-takt: .3s; --zs-ruhe: .8s; }   /* auf dem Handy zügiger */

  /* Das Raster sitzt jetzt an der Liste, nicht mehr an der Spur. */
  .zs__liste { grid-template-columns: 1fr; gap: 0; }
  .zs__linie { display: none; }

  .zs__stop {
    padding: 0 0 var(--luft-s) 1.75rem;
    border-left: 1px solid var(--hohn-linie);
  }
  .zs__stop:last-child {
    border-left-color: transparent;
    padding-bottom: 0;
  }
  .zs__punkt { left: -6px; top: 0; }
  .zs__bild  { max-width: 22rem; margin-bottom: 1.25rem; }
  .zs__text  { max-width: none; }
}

/* ============================================================
   ⛔ BEWEGUNG AUS — alles sofort da, nichts fehlt
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .zs__stop         { opacity: 1 !important; transform: none !important; transition: none !important; }
  .zs__linie::after { transform: scaleX(1) !important; transition: none !important; }
  .zs__linie::before{ display: none !important; }
  .zs__bild::after  { transform: scaleY(0) !important; transition: none !important; }
  .zs__bild img     { transform: none !important; transition: none !important; }
  .zs__punkt        { transition: none !important; }
  .zs__punkt::after { display: none !important; }
  .zs__jahr > span  { transform: none !important; transition: none !important; }
  .zs__titel::after { transform: scaleX(1) !important; transition: none !important; }
  .zs__text         { opacity: 1 !important; transition: none !important; }
}

html.no-motion .zs__stop         { opacity: 1 !important; transform: none !important; transition: none !important; }
html.no-motion .zs__linie::after { transform: scaleX(1) !important; transition: none !important; }
html.no-motion .zs__linie::before{ display: none !important; }
html.no-motion .zs__bild::after  { transform: scaleY(0) !important; transition: none !important; }
html.no-motion .zs__bild img     { transform: none !important; transition: none !important; }
html.no-motion .zs__punkt        { transition: none !important; }
html.no-motion .zs__punkt::after { display: none !important; }
html.no-motion .zs__jahr > span  { transform: none !important; transition: none !important; }
html.no-motion .zs__titel::after { transform: scaleX(1) !important; transition: none !important; }
html.no-motion .zs__text         { opacity: 1 !important; transition: none !important; }

.kein-js .zs__stop         { opacity: 1 !important; transform: none !important; }
.kein-js .zs__linie::after { transform: scaleX(1) !important; }
.kein-js .zs__bild::after  { transform: scaleY(0) !important; }
.kein-js .zs__bild img     { transform: none !important; }
.kein-js .zs__jahr > span  { transform: none !important; }
.kein-js .zs__titel::after { transform: scaleX(1) !important; }
.kein-js .zs__text         { opacity: 1 !important; }