/* ── Typografie CSS-Variablen ────────────────────── */
.tl-section {
  --tl-font:       'Inter', -apple-system, sans-serif;
  --tl-title-sz:   16px;
  --tl-title-fw:   600;
  --tl-title-lh:   1.3;
  --tl-text-sz:    13.5px;
  --tl-text-fw:    400;
  --tl-text-lh:    1.68;
  --tl-bullet-sz:  17px;
}
/* Scroll Timeline v2.0 — Frontend CSS */

.tl-section {
  position: relative;
  background: var(--tl-bg, #070f0e);
  padding: var(--tl-pad, 80px 0 100px);
  overflow: hidden;
}
.tl-wrapper {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Mobil-Sicherheit: kein horizontales Scrollen, alles im Rahmen */
.tl-section, .tl-section * { box-sizing: border-box; }
.tl-section { max-width: 100%; }
.tl-card { max-width: 100%; }
.tl-card__img, .tl-card__icon-img, .tl-card__icon { max-width: 100%; }

/* ── Sinuswelle ──────────────────────────────────── */
.tl-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
  will-change: transform;
  transform: translateZ(0);
}
.tl-ghost {
  fill: none;
  stroke: var(--tl-ghost, rgba(20,184,166,0.1));
  stroke-width: var(--tl-lw, 2);
  stroke-linecap: round;
}
/* stroke NUR per JS setAttribute — kein CSS stroke, sonst überschreibt CSS den Gradient */
.tl-live {
  fill: none;

  stroke-width: var(--tl-lw, 2);
  stroke-linecap: round;
  filter:
    drop-shadow(0 0 5px var(--tl-line-glow, rgba(20,184,166,0.8)))
    drop-shadow(0 0 14px var(--tl-line-glow, rgba(20,184,166,0.3)));
}

/* ── Karten-Liste ────────────────────────────────── */
.tl-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--tl-gap, 180px);
  padding: 16px 0;
}

/* ── Karte ───────────────────────────────────────── */
.tl-item {
  width: var(--tl-card-w, 46%);
  position: relative;
  will-change: opacity, transform;

  /* Startzustand aus JS-Config */
  opacity: 0;
  transform:
    translateX(var(--tl-start-tx, 0px))
    translateY(var(--tl-start-ty, 24px))
    scale(var(--tl-start-sc, 0.88));

  /* Einblend-Transition aus Config */
  transition:
    opacity   var(--tl-card-dur, 500ms) var(--tl-card-ease, cubic-bezier(0.34, 1.56, 0.64, 1)),
    transform var(--tl-card-dur, 500ms) var(--tl-card-ease, cubic-bezier(0.34, 1.56, 0.64, 1));
}
.tl-item.is-right { align-self: flex-end; }
.tl-item.is-left  { align-self: flex-start; }

/* Sichtbar — Zielzustand */
.tl-item.is-on {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}

/* Ausblenden beim Zurückscrollen — schneller */
.tl-item.is-out {
  transition:
    opacity   calc(var(--tl-card-dur, 500ms) * 0.55) cubic-bezier(0.4, 0, 1, 1),
    transform calc(var(--tl-card-dur, 500ms) * 0.55) cubic-bezier(0.4, 0, 1, 1);
}

/* ── Dot ─────────────────────────────────────────── */
.tl-dot {
  position: absolute;
  top: 50%;
  width:  var(--tl-dot-sz, 12px);
  height: var(--tl-dot-sz, 12px);
  border-radius: 50%;
  background: var(--tl-dot-bg, #14b8a6);
  transform: translateY(-50%) scale(0.6);
  opacity: 0.3;
  box-shadow: 0 0 8px var(--tl-dot-glow, rgba(20,184,166,0.6));
  z-index: 4;
  transition: opacity .4s ease, transform .4s cubic-bezier(0.34,1.56,0.64,1), box-shadow .4s ease;
}
.tl-item.is-right .tl-dot { left:  calc(var(--tl-dot-sz, 12px) * -.5); }
.tl-item.is-left  .tl-dot { right: calc(var(--tl-dot-sz, 12px) * -.5); }
.tl-item.is-on .tl-dot {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  box-shadow: 0 0 0 4px rgba(20,184,166,0.16), 0 0 18px var(--tl-dot-glow, rgba(20,184,166,1));
}

/* ── Card Box ────────────────────────────────────── */
.tl-card {
  display: flex; gap: 16px; align-items: center;
  width: 100%;
  padding: 18px 20px;
  background: var(--tl-card-bg, rgba(8,26,22,0.93));
  border: 1px solid var(--tl-card-bdr, rgba(20,184,166,0.18));
  border-radius: var(--tl-card-r, 18px);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(20,184,166,0.05) inset, 0 14px 50px rgba(0,0,0,0.5);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.tl-card:hover {
  border-color: var(--tl-card-bdr-h, rgba(20,184,166,0.42));
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), 0 0 32px rgba(20,184,166,0.06);
}
.tl-card__img {
  width: var(--tl-img-sz,108px); height: var(--tl-img-sz,108px);
  min-width: var(--tl-img-sz,108px);
  border-radius: var(--tl-img-r,10px);
  object-fit: cover; display: block;
}
.tl-card__img-ph {
  width: var(--tl-img-sz,108px); height: var(--tl-img-sz,108px);
  min-width: var(--tl-img-sz,108px);
  border-radius: var(--tl-img-r,10px);
  background: rgba(20,184,166,0.07); border: 1px solid rgba(20,184,166,0.12);
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}

/* ── Icon (pro Eintrag individuell gestaltet) ────── */
.tl-card__icon {
  width: var(--tl-img-sz,108px); height: var(--tl-img-sz,108px);
  min-width: var(--tl-img-sz,108px);
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.tl-card__icon-img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
}
.tl-card__icon-svg {
  width: 100%; height: 100%;
  display: block;
}
.tl-card__icon-ph { font-size: 30px; line-height: 1; opacity: 0.5; }
.tl-card__body { flex: 1; min-width: 0; }
.tl-section { font-family: var(--tl-font, 'Inter', -apple-system, sans-serif); }

/* Typografie fest an die Timeline gebunden – mit erhöhter Spezifität und
   !important, damit Theme-Regeln für h3/p (z. B. .entry-content h3) die
   gespeicherte Größe/Dicke NICHT überschreiben. */
.tl-section .tl-card .tl-card__title,
.tl-section .tl-card .tl-card__text {
  font-family: var(--tl-font, 'Inter', -apple-system, sans-serif) !important;
}
.tl-section .tl-card .tl-card__title {
  color:       var(--tl-title,#edfffe) !important;
  font-size:   var(--tl-title-sz, 16px) !important;
  font-weight: var(--tl-title-fw, 600) !important;
  line-height: var(--tl-title-lh, 1.3) !important;
  margin: 0 0 7px !important;
  letter-spacing: -0.022em;
}
.tl-section .tl-card .tl-card__text {
  color:       var(--tl-text,rgba(200,236,232,0.58)) !important;
  font-size:   var(--tl-text-sz, 13.5px) !important;
  font-weight: var(--tl-text-fw, 400) !important;
  line-height: var(--tl-text-lh, 1.68) !important;
  margin: 0 !important;
}

/* ── Icon-Liste pro Eintrag ─────────────────────── */
.tl-section .tl-card .tl-card__bullets {
  list-style: none !important;
  margin: 11px 0 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tl-section .tl-card .tl-bullet {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 !important;
  padding: 0 !important;
}
.tl-section .tl-card .tl-bullet__ico {
  flex: 0 0 auto;
  width: var(--tl-bullet-sz, 17px);
  height: var(--tl-bullet-sz, 17px);
  margin-top: 1px;
  display: inline-block;
  object-fit: contain;
}
.tl-section .tl-card .tl-bullet__ico--dot {
  width: 7px; height: 7px; margin: 7px 5px 0 5px;
  border-radius: 50%;
  background: var(--tl-bullet-ico, var(--tl-title, #edfffe));
  opacity: .85;
}
.tl-section .tl-card .tl-bullet__txt {
  color: var(--tl-text, rgba(200,236,232,0.72)) !important;
  font-size: calc(var(--tl-text-sz, 13.5px) - 0.5px) !important;
  font-weight: var(--tl-text-fw, 400) !important;
  line-height: 1.5 !important;
  font-family: var(--tl-font, 'Inter', -apple-system, sans-serif) !important;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE — Tablet & Mobile
══════════════════════════════════════════════════ */

/* Tablet (640px – 900px) */
@media (max-width: 900px) {
  .tl-wrapper { padding: 0 20px; }

  /* Karten auf 62% verbreitern */
  .tl-item { width: 62% !important; }
}

/* Mobile (max 640px) */
@media (max-width: 640px) {
  /* Section Padding reduzieren */
  .tl-section { padding: 56px 0 72px !important; }

  /* Wrapper schmaler */
  .tl-wrapper { padding: 0 16px; max-width: 100%; }

  /* Alle Karten zentriert, volle Breite */
  .tl-item {
    width: 100% !important;
    align-self: center !important;
  }
  .tl-item.is-right,
  .tl-item.is-left { align-self: center !important; }

  /* Dot ausblenden (zu klein und abgeschnitten) */
  .tl-dot { display: none !important; }

  /* Karten-Abstand reduzieren */
  .tl-list { gap: 36px !important; padding: 8px 0; }

  /* Karte: vertikal stapeln auf sehr kleinen Screens */
  .tl-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }

  /* Bild: volle Breite, fixe Höhe */
  .tl-card__img,
  .tl-card__img-ph {
    width: 100% !important;
    min-width: unset !important;
    height: 160px !important;
    border-radius: var(--tl-img-r, 10px);
  }

  /* Icons NICHT strecken – eigene Größe behalten, auf Handys deckeln */
  .tl-card__icon {
    align-self: flex-start;
    width:  min(var(--tl-img-sz, 108px), 38vw) !important;
    height: min(var(--tl-img-sz, 108px), 38vw) !important;
    min-width: 0 !important;
  }

  /* Text mobil: gespeicherte Größe respektieren, aber lesbar deckeln */
  .tl-section .tl-card .tl-card__title { font-size: clamp(15px, var(--tl-title-sz, 16px), 26px) !important; }
  .tl-section .tl-card .tl-card__text  { font-size: clamp(13px, var(--tl-text-sz, 13.5px), 18px) !important; }

  /* Wellenlinie: schmalere Amplitude automatisch (via SVG viewBox) */
}

/* Sehr kleine Screens (max 380px — z.B. iPhone SE) */
@media (max-width: 380px) {
  .tl-section { padding: 40px 0 56px !important; }
  .tl-card { padding: 12px 14px; }
  .tl-card__img,
  .tl-card__img-ph { height: 130px !important; }
  .tl-list { gap: 28px !important; }
}

/* Barrierefreiheit: Animationen reduzieren, wenn vom System gewünscht */
@media (prefers-reduced-motion: reduce) {
  .tl-item,
  .tl-item.is-on,
  .tl-item.is-out,
  .tl-dot {
    transition-duration: 0.001ms !important;
  }
}