/* Optional: Montserrat lokal ausliefern (Dateien in die Mediathek hochladen, URLs eintragen, Kommentar entfernen)
@font-face{font-family:'Montserrat';font-weight:400;font-display:swap;src:url('HIER-URL-montserrat-400.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:300;font-display:swap;src:url('HIER-URL-montserrat-300.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-weight:700;font-display:swap;src:url('HIER-URL-montserrat-700.woff2') format('woff2')}
*/
#pfaff-zeitstrahl{
  --pz-green:#6DD44B; --pz-green-soft:#B9EBA6; --pz-black:#020203; --pz-text:#676768;
  --pz-rail:#E3E6EC; --pz-ring:#BFC4D0; --pz-more:#A3A9BB; --pz-dur:6000ms;
  --pz-text-size:19px;   /* Beschreibungstext: gleiche Größe wie der Text des Moduls darüber (bei Abweichung hier ändern) */
  max-width:1280px; margin:0 auto; color:var(--pz-black);
  font-family:Montserrat,"Montserrat Fallback",Calibri,Arial,sans-serif; font-size:16px; line-height:1.5;
  box-sizing:border-box;
}
#pfaff-zeitstrahl *,#pfaff-zeitstrahl *::before,#pfaff-zeitstrahl *::after{box-sizing:border-box}

#pfaff-zeitstrahl .pz-runway{position:relative}
#pfaff-zeitstrahl .pz-stick{background:#FFFFFF;padding:48px 40px 40px;overflow:hidden;box-sizing:border-box}
/* Scroll-Modus: der Bereich bleibt auf dem Bildschirm stehen, während man scrollt */
#pfaff-zeitstrahl.is-scroll .pz-stick{position:sticky;top:var(--pz-top,0px);padding-top:24px;padding-bottom:24px}
#pfaff-zeitstrahl.is-scroll.is-fixed .pz-stick{position:static;top:auto}
#pfaff-zeitstrahl.is-scroll .pz-run{display:none}
#pfaff-zeitstrahl.is-scroll .pz-list{overflow-y:hidden}

#pfaff-zeitstrahl .pz-wrap{display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start}
#pfaff-zeitstrahl .pz-side{min-width:0}

/* ---------- Zeitstrahl (senkrecht) ---------- */
/* Zeitstrahl hat so viel Höhe wie das Detailfeld und scrollt in sich (Höhe setzt das Script) */
#pfaff-zeitstrahl .pz-list{list-style:none;margin:0;padding:28px 0 124px 40px;position:relative;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#C3C7D3 transparent}
#pfaff-zeitstrahl .pz-item{margin:0;padding:0;list-style:none;position:relative}
#pfaff-zeitstrahl .pz-rail,
#pfaff-zeitstrahl .pz-rail-fill,
#pfaff-zeitstrahl .pz-run{position:absolute;left:54px;width:4px;pointer-events:none}
#pfaff-zeitstrahl .pz-rail{background:var(--pz-rail)}
#pfaff-zeitstrahl .pz-rail-fill{background:var(--pz-green);transition:height .6s ease}
#pfaff-zeitstrahl .pz-run{background:var(--pz-green-soft);transform-origin:top center;transform:scaleY(0);animation:pzrun var(--pz-dur) linear forwards}
#pfaff-zeitstrahl.is-paused .pz-run{animation-play-state:paused}
@keyframes pzrun{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Fortsetzung nach dem letzten Eintrag: einzelne Punkte und Pfeilspitze, die nacheinander grün werden */
#pfaff-zeitstrahl .pz-more{position:absolute;left:46px;width:20px;display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none}
#pfaff-zeitstrahl .pz-mdot{display:block;width:7px;height:7px;border-radius:50%;background:var(--pz-more)}
#pfaff-zeitstrahl .pz-marrow{display:block;width:16px;height:16px;margin-top:-4px;
  border-right:4px solid var(--pz-more);border-bottom:4px solid var(--pz-more);transform:rotate(45deg)}
#pfaff-zeitstrahl .pz-more.is-run .pz-mdot{animation:pzdot .35s ease forwards;animation-delay:calc(var(--pz-dur) * var(--i) / 5)}
#pfaff-zeitstrahl .pz-more.is-run .pz-marrow{animation:pzarrow .35s ease forwards;animation-delay:calc(var(--pz-dur) * var(--i) / 5)}
#pfaff-zeitstrahl.is-paused .pz-more.is-run .pz-mdot,
#pfaff-zeitstrahl.is-paused .pz-more.is-run .pz-marrow{animation-play-state:paused}
@keyframes pzdot{from{background:var(--pz-more)}to{background:var(--pz-green)}}
@keyframes pzarrow{from{border-color:var(--pz-more)}to{border-color:var(--pz-green)}}

#pfaff-zeitstrahl .pz-btn{
  all:unset; display:block; width:100%; position:relative; cursor:pointer; box-sizing:border-box;
  padding:8px 8px 8px 62px; font-family:inherit; font-size:28px; font-weight:300; line-height:1.2; white-space:nowrap;
  font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; letter-spacing:0;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
  color:var(--pz-black);
}
#pfaff-zeitstrahl .pz-btn::before{
  content:""; position:absolute; left:16px; top:50%; width:18px; height:18px; border-radius:50%;
  transform:translate(-50%,-50%); background:#fff; border:3px solid var(--pz-ring);
  transition:width .25s ease,height .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease;
}
#pfaff-zeitstrahl .pz-btn:hover::before{border-color:var(--pz-green)}
#pfaff-zeitstrahl .pz-btn:focus-visible{outline:3px solid var(--pz-black);outline-offset:2px;border-radius:4px}
#pfaff-zeitstrahl .pz-item.is-past .pz-btn::before{background:var(--pz-green);border-color:var(--pz-green)}
#pfaff-zeitstrahl .pz-item.is-active .pz-btn{font-weight:700}
#pfaff-zeitstrahl .pz-item.is-active .pz-btn::before{width:32px;height:32px;background:var(--pz-green);border-color:var(--pz-green);box-shadow:0 0 0 9px rgba(109,212,75,.28);animation:pzpulse 1.8s ease-out infinite}
/* Aktueller Punkt pulsiert: Ring breitet sich aus, der Punkt "atmet" leicht */
@keyframes pzpulse{
  0%{box-shadow:0 0 0 9px rgba(109,212,75,.28),0 0 0 9px rgba(109,212,75,.6);transform:translate(-50%,-50%) scale(1)}
  70%{box-shadow:0 0 0 9px rgba(109,212,75,.28),0 0 0 32px rgba(109,212,75,0);transform:translate(-50%,-50%) scale(1.14)}
  100%{box-shadow:0 0 0 9px rgba(109,212,75,.28),0 0 0 32px rgba(109,212,75,0);transform:translate(-50%,-50%) scale(1)}
}

/* ---------- Detailfeld: Text oben, Foto darunter ---------- */
#pfaff-zeitstrahl .pz-panel{
  display:flex; flex-direction:column; gap:28px;
  margin:0; padding:0; transition:opacity .2s ease,transform .2s ease;
}
#pfaff-zeitstrahl .pz-panel.is-swap{opacity:0;transform:translateY(8px)}
#pfaff-zeitstrahl .pz-copy{min-width:0}
#pfaff-zeitstrahl .pz-big{margin:0 0 10px;padding:0;font-family:inherit;font-weight:700;
  font-size:28px;line-height:1.25;letter-spacing:0;color:var(--pz-black);text-transform:none}
#pfaff-zeitstrahl .pz-text{max-width:64ch}
#pfaff-zeitstrahl .pz-text p{margin:0 0 .6em;padding:0;font-size:var(--pz-text-size);font-weight:300;line-height:1.45;color:var(--pz-text)}
#pfaff-zeitstrahl .pz-text p:last-child{margin-bottom:0}

/* Foto gerade, ohne Rahmen, im Originalformat (quer, hoch, quadratisch), ohne Beschnitt, linksbündig.
   Die Bildfläche hat immer die gleiche Höhe (die Seite springt nicht), das Foto passt sich darin an. Größe setzt das Script. */
#pfaff-zeitstrahl .pz-photo{margin:0;padding:0;background:none;border:0;box-shadow:none;transform:none}
#pfaff-zeitstrahl .pz-img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;margin:0;padding:0;border:0;border-radius:0;background:transparent;
  /* Schatten wie bei einem Foto, das auf einem Tisch liegt: feine Kante + weicher Schatten nach unten */
  box-shadow:0 1px 2px rgba(0,0,0,.14),0 4px 10px rgba(0,0,0,.10),0 16px 26px -10px rgba(0,0,0,.30)}
/* Kein Schatten, wenn kein Bild hinterlegt ist */
#pfaff-zeitstrahl .pz-img.is-empty{box-shadow:none}

/* ---------- Tablet / Smartphone ---------- */
@media (max-width:980px){
  #pfaff-zeitstrahl .pz-wrap{grid-template-columns:200px minmax(0,1fr);gap:32px}
  #pfaff-zeitstrahl .pz-btn{font-size:24px;padding-left:56px}
  #pfaff-zeitstrahl .pz-big{font-size:26px}
}
@media (max-width:760px){
  /* Smartphone: Zeitstrahl waagerecht zum Wischen oben, Text und Foto direkt darunter */
  #pfaff-zeitstrahl .pz-stick{padding:20px 0 24px}
  #pfaff-zeitstrahl.is-scroll .pz-stick{padding-top:12px;padding-bottom:12px}
  #pfaff-zeitstrahl .pz-wrap{grid-template-columns:1fr;gap:20px}
  #pfaff-zeitstrahl .pz-side{max-width:none}
  #pfaff-zeitstrahl .pz-list{display:flex;flex-direction:row;align-items:flex-start;overflow-x:auto;overflow-y:hidden;
    padding:24px 28px 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;
    -webkit-mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(to right,transparent 0,#000 18px,#000 calc(100% - 28px),transparent 100%)}
  #pfaff-zeitstrahl .pz-list::-webkit-scrollbar{display:none}
  #pfaff-zeitstrahl .pz-item{flex:none}
  #pfaff-zeitstrahl .pz-rail,
  #pfaff-zeitstrahl .pz-rail-fill,
  #pfaff-zeitstrahl .pz-run{top:50px;height:4px}
  #pfaff-zeitstrahl .pz-rail-fill{transition:width .6s ease}
  #pfaff-zeitstrahl .pz-run{transform-origin:left center;transform:scaleX(0);animation:pzrunx var(--pz-dur) linear forwards}
  #pfaff-zeitstrahl .pz-more{top:43px;width:auto;height:18px;flex-direction:row;gap:9px;padding-right:44px}
  #pfaff-zeitstrahl .pz-marrow{margin-top:0;margin-left:-4px;transform:rotate(-45deg)}
  #pfaff-zeitstrahl .pz-btn{display:block;width:auto;padding:46px 14px 12px;text-align:center;font-size:20px;min-height:44px}
  #pfaff-zeitstrahl .pz-btn::before{left:50%;top:28px;width:16px;height:16px;border-width:3px}
  #pfaff-zeitstrahl .pz-item.is-active .pz-btn::before{width:28px;height:28px;box-shadow:0 0 0 7px rgba(109,212,75,.28);animation-name:pzpulsem}
  #pfaff-zeitstrahl .pz-panel{position:static;gap:18px;margin:0 18px}
  #pfaff-zeitstrahl .pz-big{font-size:24px}
  #pfaff-zeitstrahl .pz-text p{font-size:calc(var(--pz-text-size) - 1px)}
}
@keyframes pzrunx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pzpulsem{
  0%{box-shadow:0 0 0 7px rgba(109,212,75,.28),0 0 0 7px rgba(109,212,75,.6);transform:translate(-50%,-50%) scale(1)}
  70%{box-shadow:0 0 0 7px rgba(109,212,75,.28),0 0 0 22px rgba(109,212,75,0);transform:translate(-50%,-50%) scale(1.12)}
  100%{box-shadow:0 0 0 7px rgba(109,212,75,.28),0 0 0 22px rgba(109,212,75,0);transform:translate(-50%,-50%) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  #pfaff-zeitstrahl *,#pfaff-zeitstrahl *::before{transition:none!important}
  #pfaff-zeitstrahl .pz-item.is-active .pz-btn::before{animation:none!important}
}