/* ============================================================ */
/* === Timeline Styles (assets/css/timeline.css)           === */
/* ============================================================ */

/* ----------------------------------------- */
/* --- CSS Variablen für die Timeline ---- */
/* Diese Variablen definieren das Layout und die Basisgrößen der Timeline. */
/* ----------------------------------------- */
:root { /* Oder spezifischer Selektor, wenn die Variablen nicht global sein sollen */
  /* --- Typografie (Layout-relevant) --- */
  --timeline-time-font-size: 1.0em;
  --timeline-time-font-weight: 300;
  --timeline-content-font-size: 1.0em;
  --timeline-content-font-weight: normal;
  --timeline-content-line-height: 1.4;
  --timeline-content-padding-top: 0px;
  --timeline-content-padding-bottom: 0px;

  /* --- Abstände & Layout-Positionen --- */
  --timeline-line-position-left: 94px;
  --timeline-ul-padding-left: 114px;
  --timeline-li-padding-left: 0px;
  --timeline-bullet-vertical-pos: 11px; 
  --timeline-time-vertical-pos: 10px; 
  --timeline-line-bottom-offset: 36px;
  --timeline-li-spacing-bottom: 0.8em; 
  --timeline-time-right-offset: 38px;

  /* --- Größen --- */
  --timeline-line-width: 2px;
  --timeline-bullet-diameter: 8px;        
  --timeline-bullet-border-width: 2px;    
  --timeline-li-min-height: 40px;
  --timeline-time-min-width: 60px;

  /* Standard-Farb-Fallbacks (werden von --markdown-* überschrieben) */
  --timeline-default-bullet-fill: white;
  --timeline-default-bullet-border: #333;
  --timeline-default-line-color: #333;
  --timeline-default-time-color: #666;
  --timeline-default-content-color: #333;
  /* Fallback für Timeline Highlight, falls --markdown-timeline-highlight-fill nicht gesetzt ist */
  --timeline-default-highlight-fill: #ffc107; 
}

/* ----------------------------------------- */
/* ---------- Timeline Styles ------------- */
/* ----------------------------------------- */



.markdown-content-container ul.timeline {
  list-style: none;
  position: relative;
  margin: 1.5em 0 1em 0;
  padding-left: var(--timeline-ul-padding-left); 
}

/* Vertikale Linie */
.markdown-content-container ul.timeline:before {
  content: '';
  position: absolute;
  left: var(--timeline-line-position-left);
  top: var(--timeline-bullet-vertical-pos); 
  bottom: var(--timeline-line-bottom-offset);
  width: var(--timeline-line-width);
  background: var(--markdown-line-color, var(--timeline-default-line-color)); 
  z-index: 1;
}

/* Listenelemente in der Timeline */
.markdown-content-container ul.timeline li {
  position: relative;
  padding-left: var(--timeline-li-padding-left);
  padding-bottom: var(--timeline-li-spacing-bottom);
  padding-top: var(--timeline-content-padding-top);
  min-height: var(--timeline-li-min-height);
  line-height: var(--timeline-content-line-height);
  font-size: var(--timeline-content-font-size);
  font-weight: var(--timeline-content-font-weight);
  color: var(--markdown-text-color, var(--timeline-default-content-color)); 
}

/* Bullet Point (CSS-Kreis) */
.markdown-content-container ul.timeline li::before {
  content: '';
  position: absolute;
  
  --_bullet-total-diameter-visual: calc(var(--timeline-bullet-diameter) + 2 * var(--timeline-bullet-border-width));
  --_bullet-radius-visual: calc(var(--_bullet-total-diameter-visual) / 2);
  left: calc(
    var(--timeline-line-position-left) 
    - var(--_bullet-radius-visual)     
    + (var(--timeline-line-width) / 2) 
    - var(--timeline-ul-padding-left)  
  );
  top: var(--timeline-bullet-vertical-pos); 
  transform: translateY(-50%); 
  width: var(--timeline-bullet-diameter);    
  height: var(--timeline-bullet-diameter);   
  
  background: var(--markdown-element-bg, var(--timeline-default-bullet-fill)); 
  border: var(--timeline-bullet-border-width) solid var(--markdown-line-color, var(--timeline-default-bullet-border)); 
  border-radius: 50%;
  z-index: 2;
}

/* Zeitangaben */
.markdown-content-container ul.timeline li::after {
  content: attr(data-time);
  position: absolute;
  right: calc(100% + var(--timeline-time-right-offset));
  top: var(--timeline-time-vertical-pos);
  transform: translateY(-50%);
  font-size: var(--timeline-time-font-size);
  font-weight: var(--timeline-time-font-weight);
  color: var(--markdown-text-color, var(--timeline-default-time-color)); 
  opacity: 0.80; 
  white-space: nowrap;
  min-width: var(--timeline-time-min-width);
  text-align: right;
}

/* ----------------------------------------- */
/* ---------- Highlighting ----------------- */
/* ----------------------------------------- */

.markdown-content-container ul.timeline li.highlight {
    font-weight: 500; 
}

.markdown-content-container ul.timeline li.highlight::before {
    /* Bullet-Füllung nimmt die berechnete Akzentfarbe (wie Callout-BG oder Standard-Akzent) */
    background: var(--markdown-timeline-highlight-fill, var(--timeline-default-highlight-fill)); 
    /* Rand bleibt wie bei normalen Bullets (also die Kontrast-Linienfarbe des Blocks) */
    border-color: var(--markdown-line-color, var(--timeline-default-bullet-border)); 
}

.markdown-content-container ul.timeline li.highlight::after {
    opacity: 1; 
    font-weight: 500; 
}