/* Erzwingt: hidden bleibt unsichtbar */
.zeitstrahl [hidden] { display: none !important; }

/* =========================================================
   ZEITSTRAHL – GRID (links/rechts stabil, nichts springt)
   ========================================================= */

.zeitstrahl.zeitstrahl-flow{
  --zs-yellow:#ffed00;
  --zs-magenta:#e5007d;
  --zs-gray-bg:#f2f2f2;

  --zs-point:20px;
  --zs-year:55px;

  --zs-line:50%;         /* Mittellinie */
  --zs-dock: 18px;       /* Abstand zur Linie (klein = näher) */
  --zs-card-max:520px;

  position:relative;
  padding: 20px 12px 20px;
  width:100%;
  box-sizing:border-box;
  color: var(--zs-magenta);
}

/* =========================================================
   LINIE: Außenlinie ausblenden (wir zeichnen sie in .zs-scroll als Background)
   ========================================================= */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-linie{
  display:none;
}

/* Spacer */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-spacer{ height: 0; }

/* =========================================================
   ZEILE (Item) = GRID mit zwei Spalten (links / rechts)
   ========================================================= */

.zeitstrahl.zeitstrahl-flow .zeitstrahl-item{
  position:relative;
  width:100%;
  box-sizing:border-box;

  display:grid;
  grid-template-columns: 1fr 1fr; /* links | rechts */
  align-items:start;
  z-index: 2;
}

/* =========================================================
   PUNKTE
   ========================================================= */

/* Jahrespunkt */
.zeitstrahl .zeitstrahl-jahr-punkt{
  position:absolute;
  left: var(--zs-line);
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--zs-yellow);
  border-radius: 50%;
  width: var(--zs-year);
  height: var(--zs-year);
}

/* Event-Punkt */
.zeitstrahl .zeitstrahl-punkt{
  position:absolute;
  width: var(--zs-point);
  height: var(--zs-point);
  background: var(--zs-yellow);
  border-radius: 50%;
}

/* =========================================================
   EVENTS
   ========================================================= */

.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag{
  min-height: 34px;
}

/* Button = ANKER für den Punkt */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-trigger{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;

  display:inline-block;
  width:auto;
  max-width: min(var(--zs-card-max), 42vw);

  color:inherit;
  text-align:left;

  position:relative;
}

/* Punkt sitzt relativ zum Button */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-trigger .zeitstrahl-punkt{
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Titel/Label */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-label{
  display:inline-block;
  background:transparent;
  border:0;
  padding:4px 0;
  line-height:1.25;
  font-size: 1.5rem;
}
.zeitstrahl.zeitstrahl-flow .zeitstrahl-label strong{
  font-size: 1.6rem;
  line-height: 1.15;
  font-weight: 900;
}
@media (max-width: 820px){
  .zeitstrahl.zeitstrahl-flow .zeitstrahl-label strong{
    font-size: 1.15rem;
  }
}

/* Datum im Label versteckt */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-event-datum{ display:none; }

/* Smooth Zoom für Punkt + Titel */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-trigger .zeitstrahl-punkt,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-label{
  transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
}

/* Transform-Origin je Seite */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-label{
  transform-origin: left center;
}
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-label{
  transform-origin: right center;
}

/* Punkt: pop */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-trigger .zeitstrahl-punkt{
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Hover/Focus: Punkt wächst */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-trigger:hover .zeitstrahl-punkt,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-trigger:focus-visible .zeitstrahl-punkt{
  transform: translate(-50%, -50%) scale(1.6);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}

/* Hover/Focus: Titel/Label wächst */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-trigger:hover .zeitstrahl-label,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-trigger:focus-visible .zeitstrahl-label{
  transform: scale(1.16);
}

/* Fokus-Rahmen */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-trigger:focus-visible{
  outline:2px solid rgba(229,0,125,0.35);
  outline-offset:6px;
  border-radius:10px;
}

/* =========================================================
   PANEL (Design + Text schwarz + Ausrichtung)
   ========================================================= */

.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel{
  margin-top:10px;
  display:inline-block;
  max-width: min(var(--zs-card-max), 90vw);
  width: fit-content;
  background: var(--zs-gray-bg);
  border-radius: 14px;
  padding: 14px 16px;
  box-sizing:border-box;

  color: #000 !important;
  text-align: left;

  overflow: hidden;
  transition: max-height 260ms ease, opacity 220ms ease, transform 220ms ease;
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel.is-opening{
  opacity: 1;
  transform: translateY(0);
}
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel.is-closing{
  opacity: 0;
  transform: translateY(-4px);
}
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel.is-animating{
  will-change: max-height, opacity, transform;
}

/* Panel-Text-Elemente schwarz */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel p,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel li,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel span,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel strong,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel em,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h1,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h2,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h3,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h4,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h5,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h6{
  color: #000 !important;
}

/* Links im Panel */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel a{
  color: #000 !important;
}
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel a:hover{
  color: var(--zs-magenta) !important;
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel-datum{
  font-weight:800;
  margin: 0 0 10px 0;
  padding: 0;
  color: #000 !important;
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel > :first-child{ margin-top: 0; }
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel > :last-child{ margin-bottom: 0; }

.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel p{
  margin: 0 0 12px 0;
  padding: 0;
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel ul,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel ol{
  margin: 0 0 12px 0;
  padding-left: 1.2em;
}

/* =========================================================
   LINKS / RECHTS – Docking an der Linie
   ========================================================= */

/* LINKS */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-trigger{
  grid-column: 1;
  justify-self: end;
  margin-right: var(--zs-dock);
  text-align: right;
}
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-panel{
  grid-column: 1;
  justify-self: end;
  margin-right: var(--zs-dock);
}

/* Event-Punkt LINKS: bis zur Mittellinie */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-trigger .zeitstrahl-punkt{
  left: calc(100% + var(--zs-dock));
}

/* RECHTS */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-trigger{
  grid-column: 2;
  justify-self: start;
  margin-left: var(--zs-dock);
  text-align: left;
}
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-panel{
  grid-column: 2;
  justify-self: start;
  margin-left: var(--zs-dock);
}

/* Event-Punkt RECHTS: bis zur Mittellinie */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-trigger .zeitstrahl-punkt{
  left: calc(0px - var(--zs-dock));
}

/* =========================================================
   JAHRESMARKER
   ========================================================= */

.zeitstrahl.zeitstrahl-flow .zeitstrahl-jahr{
  pointer-events:none;
  min-height: var(--zs-year);
}

.zeitstrahl .zeitstrahl-jahr-label{
  position:absolute;
  left: var(--zs-line);
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--zs-year);
  height: var(--zs-year);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  letter-spacing:0.5px;
  color: var(--zs-magenta);
}

/* Bilder im Panel */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

/* =========================================================
   PANEL-AUSRICHTUNG
   ========================================================= */

.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-panel{
  text-align: left;
}
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-panel{
  text-align: right;
}
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel-datum,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel p,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h1,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h2,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h3,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h4,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h5,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-panel h6{
  text-align: inherit;
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-panel ul,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-panel ol{
  padding-left: 1.2em;
  padding-right: 0;
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-panel ul,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-panel ol{
  padding-left: 0;
  padding-right: 1.2em;
}

/* =========================================================
   BIRTH / NOW Marker (große Punkte)
   ========================================================= */

.zeitstrahl.zeitstrahl-flow .zeitstrahl-birth{
  pointer-events: none;
  min-height: 96px;
  position: relative;
  z-index: 3;
}

.zeitstrahl .zeitstrahl-birth-punkt{
  position: absolute;
  left: var(--zs-line);
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--zs-magenta);
  border-radius: 50%;
  width: 96px;
  height: 96px;
  box-shadow: 0 18px 38px rgba(0,0,0,0.18);
  z-index: 4;
}

.zeitstrahl .zeitstrahl-birth-label{
  position: absolute;
  left: var(--zs-line);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #fff;
  z-index: 5;
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-now{
  pointer-events: none;
  min-height: 96px;
  position: relative;
  z-index: 3;
}

.zeitstrahl .zeitstrahl-now-punkt{
  position: absolute;
  left: var(--zs-line);
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--zs-magenta);
  border-radius: 50%;
  width: 96px;
  height: 96px;
  box-shadow: 0 18px 38px rgba(0,0,0,0.18);
  z-index: 4;
}

.zeitstrahl .zeitstrahl-now-label{
  position: absolute;
  left: var(--zs-line);
  top: 50%;
  transform: translate(-50%, -50%);
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #fff;
  z-index: 5;
}

/* =========================================================
   SCROLL-INNERHALB DES ZEITSTRAHLS + LINIE NUR IM SCROLLBEREICH
   ========================================================= */

.zeitstrahl.zeitstrahl-flow .zs-scroll{
  height: 75vh;
  max-height: 900px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding: 10px 0;
  scroll-behavior: smooth;

  /* Linie als Background: nur innerhalb des Scrollbereichs sichtbar */
  background-image: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18));
  background-repeat: no-repeat;

  /* IMPORTANT: Linie NICHT in die Fade-Masken hinein zeichnen */
  background-size: 2px calc(100% - 24vh);      /* 12vh oben + 12vh unten */
  background-position: var(--zs-line) 12vh;    /* Start nach oberer Maske */
}

/* Fade-Maske oben/unten */
.zeitstrahl.zeitstrahl-flow .zs-scroll{
  height: 75vh;
  max-height: 900px;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  padding: 10px 0;
  scroll-behavior: smooth;

  /* Linie als Background: über die volle Höhe */
  background-image: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18));
  background-repeat: no-repeat;
  background-size: 2px 100%;
  background-position: var(--zs-line) 0;

  /* weiches Ausblenden oben/unten (betrifft Inhalt + Linie) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12vh,
    #000 calc(100% - 12vh),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 12vh,
    #000 calc(100% - 12vh),
    transparent 100%
  );

  /* Scrollbalken ausblenden (Scroll bleibt aktiv) */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.zeitstrahl.zeitstrahl-flow .zs-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
/* Active Highlight */
.zeitstrahl.zeitstrahl-flow .zeitstrahl-item{
  opacity: 0.35;
  transform: scale(0.96);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
  will-change: transform, opacity;
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-item.is-active{
  opacity: 1;
  transform: scale(1.08);
  filter: saturate(1.05);
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-item.is-active .zeitstrahl-punkt{
  transform: translate(-50%, -50%) scale(1.9);
  box-shadow: 0 16px 34px rgba(0,0,0,0.22);
}

.zeitstrahl.zeitstrahl-flow .zeitstrahl-item.is-active .zeitstrahl-now-punkt,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-item.is-active .zeitstrahl-birth-punkt,
.zeitstrahl.zeitstrahl-flow .zeitstrahl-item.is-active .zeitstrahl-jahr-punkt{
  box-shadow: 0 20px 44px rgba(0,0,0,0.22);
  transform: translate(-50%, -50%) scale(1.05);
}

/* Scrollbalken ausblenden (Scroll bleibt aktiv) */
.zeitstrahl.zeitstrahl-flow .zs-scroll{
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.zeitstrahl.zeitstrahl-flow .zs-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}

/* =========================================================
   RESPONSIVE: Mobile einspaltig rechts
   ========================================================= */
@media (max-width: 820px){
  .zeitstrahl.zeitstrahl-flow{
    --zs-line: 18px;
    --zs-dock: 16px;
    padding-left: 18px;
  }

  .zeitstrahl.zeitstrahl-flow .zeitstrahl-item{
    grid-template-columns: 1fr;
  }

  .zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-trigger,
  .zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-trigger{
    grid-column: 1;
    justify-self: start;
    margin-left: 54px;
    margin-right: 0;
    text-align:left;
    max-width: 92vw;
  }

  .zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-panel,
  .zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-panel{
    grid-column: 1;
    justify-self: start;
    margin-left: 54px;
    margin-right: 0;
    max-width: 92vw;
  }

  .zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-left .zeitstrahl-trigger .zeitstrahl-punkt,
  .zeitstrahl.zeitstrahl-flow .zeitstrahl-eintrag.is-right .zeitstrahl-trigger .zeitstrahl-punkt{
    left: calc(0px - 54px);
  }

  .zeitstrahl .zeitstrahl-birth-punkt,
  .zeitstrahl .zeitstrahl-birth-label,
  .zeitstrahl .zeitstrahl-now-punkt,
  .zeitstrahl .zeitstrahl-now-label{
    left: var(--zs-line);
  }

  /* Linie im Mobile ebenfalls korrekt positionieren */
  .zeitstrahl.zeitstrahl-flow .zs-scroll{
    background-position: var(--zs-line) 12vh;
  }
}

/* Extra Scroll-Puffer, damit erster/letzter Punkt in die Mitte gescrollt werden kann */
.zeitstrahl.zeitstrahl-flow .zs-inner{
  padding-top: 20vh;
  padding-bottom: 20vh;
}

@media (max-width: 820px){
  .zeitstrahl.zeitstrahl-flow .zs-inner{
    padding-top: 20vh;
    padding-bottom: 20vh;
  }
}