/* Root Variablen (werden per Inline-CSS aus Admin-Optionen gesetzt) */
:root{
  --tl-line:#e5e7eb;            /* Linienfarbe */
  --tl-line-w:3px;              /* Linienstärke */
  --tl-marker:#9ca3af;          /* Markerfarbe */
  --tl-marker-size:14px;        /* Markergröße */
  --tl-media-w:420px;           /* Max. Medienbreite */
  --tl-media-r:10px;            /* Medienradius */
  --tl-font:inherit;            /* Font Family */
  --tl-title-fs:20px;           /* Titelgröße */
  --tl-text-fs:16px;            /* Textgröße */
  --tl-gap-y:32px;              /* Abstand zwischen Items */
  --tl-card-pad:16px;           /* Innenabstand Karte */
  --tl-year-bg:#111827;         /* Jahr-Badge Hintergrund */
  --tl-year-color:#ffffff;      /* Jahr-Badge Textfarbe */
  --tl-year-ring:8px;           /* Jahr Kreis-Ringbreite */
}

/* Timeline – Mittelachse */
.tl-timeline.tl-centered{ position:relative; margin:2rem auto; max-width:1100px; font-family:var(--tl-font); }
.tl-timeline.tl-centered:before{ content:''; position:absolute; left:50%; top:0; bottom:0; width:var(--tl-line-w); background:var(--tl-line); transform:translateX(-50%); }

/* Jahresmarker – Badge mit rundem Indikator */
.tl-year{ text-align:center; margin: calc(var(--tl-gap-y)*.9) 0 1rem; }
.tl-year-badge{ display:inline-flex; align-items:center; gap:.6rem; color:var(--tl-year-color); background:var(--tl-year-bg); padding:.45rem .9rem; border-radius:999px; box-shadow:0 6px 20px rgba(0,0,0,.15); }
.tl-year-badge i{ display:block; width:.85rem; height:.85rem; border-radius:999px; background:var(--tl-year-color); box-shadow: 0 0 0 var(--tl-year-ring) var(--tl-year-bg), 0 0 0 calc(var(--tl-year-ring)*2) #fff; }
/* Menü soll immer über dem Jahres-Kreis liegen */
.tl-year,
.tl-year .tl-year-circle {
  z-index: 0 !important;
  pointer-events: none; /* blockiert keine Hover/Klicks vom Menü */
}

/* Items – Grid links/rechts */
.tl-item{ position:relative; margin:0 0 var(--tl-gap-y); display:grid; }
.tl-item.side-left{  grid-template-columns: 1fr 50px 1fr; }
.tl-item.side-right{ grid-template-columns: 1fr 50px 1fr; }
.tl-item.side-left  .tl-card{ grid-column:1 / span 1; }
.tl-item.side-right .tl-card{ grid-column:3 / span 1; }

/* Marker sitzt auf Mittelachse */
.tl-marker{ position:absolute; top:1rem; left:50%; transform:translate(-50%,-50%); width:var(--tl-marker-size); height:var(--tl-marker-size); background:#fff; border: calc(var(--tl-marker-size)*.2) solid var(--tl-marker); border-radius:999px; box-shadow:0 0 0 4px #fff; z-index:2; }

/* Karte */
.tl-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; padding:var(--tl-card-pad); box-shadow:0 2px 10px rgba(0,0,0,.05); }
.tl-date{ font-size: clamp(.85rem, .9vw, .95rem); color:rgba(0,0,0,.6); margin-bottom:.25rem; }
.tl-title{ 
margin:0 0 .5rem; 
font-size:var(--tl-title-fs); 
color: #C93264;
}
.tl-content{ line-height:1.7; font-size:var(--tl-text-fs); }

/* Medien kleiner, limitiert über Option */
.tl-media{ display:block; margin:.5rem 0 1rem; border-radius:var(--tl-media-r); overflow:hidden; border:1px solid rgba(0,0,0,.06); width:min(100%, var(--tl-media-w)); }
/* Allgemeine Bilder kleiner begrenzen */
.tl-media img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 320px;   /* begrenzt die Höhe */
  width: auto;         /* verhindert Zwangsverzerrung */
  margin: 0 auto;      /* zentrieren bei schmalen Bildern */
  border-radius: var(--tl-media-r);
}

.tl-media-fallback{ padding:1rem; text-align:center; background:rgba(0,0,0,.03); font-weight:600; }

/* Lightbox */
.tl-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:99999; padding:2rem; }
.tl-overlay.is-open{ opacity:1; visibility:visible; }
.tl-overlay-inner{ position:relative; max-width:min(1200px, 92vw); max-height:86vh; outline:none; }
.tl-lightbox-media{ max-width:100%; max-height:86vh; display:block; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.3); background:#000; }
.tl-overlay-close{ position:absolute; top:-1.5rem; right:-1.5rem; width:2.25rem; height:2.25rem; border-radius:999px; border:none; background:#fff; font-size:1.35rem; line-height:2.25rem; cursor:pointer; box-shadow:0 6px 20px rgba(0,0,0,.25); }

/* Einblende-Animation (optional) */
@keyframes tl-fadeup{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform:none;} }
.tl-timeline[data-animate="1"] .tl-item .tl-card{ animation: tl-fadeup .45s ease both; }
.tl-timeline[data-animate="1"] .tl-item:nth-child(2n) .tl-card{ animation-delay: .06s; }

/* Responsive: Single-Column */
@media (max-width: 900px){
  .tl-timeline.tl-centered:before{ left:24px; transform:none; }
  .tl-item{ grid-template-columns: 48px 1fr !important; }
  .tl-item .tl-card{ grid-column: 2 / span 1 !important; }
  .tl-marker{ left:24px; transform:translate(-50%,-50%); }
  .tl-media{ width:100%; }
}
/* Video-Thumbnail kleiner + Play-Overlay */
.tl-video-thumb {
  position: relative;
  display: inline-block;
  width: min(100%, var(--tl-media-w));
}

.tl-video-thumb img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 220px;   /* etwas niedriger als Fotos */
  width: auto;
  margin: 0 auto;
  border-radius: var(--tl-media-r);
}

.tl-video-thumb .tl-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  line-height: 1;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,.7);
  pointer-events: none;   /* Klick geht an den Link durch */
}