/* ═══ Scroll Timeline – Frontend ═════════════════════════════════════════════ */
.tl-section {
    position: relative;
    width: 100%;
    background: var(--tl-bg, #070f0e);
    padding-top: 40px;
    padding-bottom: 40px;
    overflow: hidden;
    box-sizing: border-box;
}
.tl-section *,
.tl-section *::before,
.tl-section *::after { box-sizing: border-box; }

.tl-wrapper {
    position: relative;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* ── Wellenlinie (SVG) ── */
.tl-svg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: visible;
}
.tl-ghost {
    stroke: var(--tl-ghost, rgba(20,184,166,0.10));
    stroke-width: var(--tl-line-width, 3px);
    stroke-linecap: round;
}
.tl-live {
    stroke: var(--tl-line, #14b8a6);
    stroke-width: var(--tl-line-width, 3px);
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px var(--tl-line-glow, rgba(20,184,166,0.75)));
}

/* Glow deaktiviert */
.tl-noglow .tl-live { filter: none; }
.tl-noglow .tl-dot { box-shadow: 0 0 0 4px var(--tl-dot-ring, rgba(0,0,0,.25)); }
.tl-noglow .tl-card { box-shadow: 0 10px 30px rgba(0,0,0,.28); }

/* ── Karten-Liste ── */
.tl-list { position: relative; z-index: 2; }

.tl-item {
    position: absolute;
    width: var(--tl-card-width, 46%);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
    will-change: opacity, transform;
}
.tl-item.is-visible { opacity: 1; transform: translateY(0); }
.tl-item.tl-left  { left: 0;  }
.tl-item.tl-right { right: 0; }

/* Verbinder Punkt → Karte */
.tl-dot {
    position: absolute;
    top: 50%;
    width: var(--tl-dot-size, 15px);
    height: var(--tl-dot-size, 15px);
    border-radius: 50%;
    background: var(--tl-dot, #14b8a6);
    box-shadow: 0 0 0 4px var(--tl-dot-ring, rgba(0,0,0,.25)), 0 0 14px var(--tl-dot-glow, rgba(20,184,166,0.9));
    transform: translate(-50%, -50%);
    z-index: 3;
}

/* Punkt ausgeblendet – JS rendert ihn dann gar nicht erst, CSS ist die Absicherung */
.tl-nodot .tl-dot { display: none !important; }

/* ── Karte ── */
.tl-card {
    position: relative;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 20px 22px;
    background: var(--tl-card-bg, rgba(8,26,22,0.93));
    border: 1px solid var(--tl-card-border, rgba(20,184,166,0.18));
    border-radius: var(--tl-card-radius, 18px);
    box-shadow: 0 18px 50px rgba(0,0,0,.35);
    transition: border-color .3s ease, transform .3s ease;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.tl-card:hover {
    border-color: var(--tl-card-border-hover, rgba(20,184,166,0.44));
    transform: translateY(-3px);
}
.tl-right .tl-card { flex-direction: row-reverse; text-align: right; }
.tl-right .tl-card .tl-card__bullets { text-align: right; }

/* Medien */
.tl-media { flex: 0 0 auto; }
.tl-media img.tl-photo {
    width: var(--tl-img-sz, 112px);
    height: var(--tl-img-sz, 112px);
    object-fit: cover;
    border-radius: var(--tl-img-radius, 12px);
    display: block;
}
.tl-icon-wrap {
    width: var(--tl-img-sz, 112px);
    height: var(--tl-img-sz, 112px);
    display: flex;
    align-items: center;
    justify-content: center;
}
.tl-icon-wrap.shape-circle  { border-radius: 50%; }
.tl-icon-wrap.shape-rounded { border-radius: 20px; }
.tl-icon-wrap.shape-square  { border-radius: 4px; }
/* Fuellt die Icon-Box formattreu – wichtig fuer SVGs ohne feste Groessenangabe,
   die sonst auf die Standardgroesse 300x150 fallen wuerden. */
.tl-icon-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.tl-icon-wrap .tl-icon-mask {
    width: 100%; height: 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}

/* Text */
.tl-card__body { min-width: 0; flex: 1 1 auto; }
.tl-section .tl-card .tl-card__title {
    margin: 0 0 8px !important;
    font-family: var(--tl-title-font, inherit) !important;
    font-size: var(--tl-title-sz, 26px) !important;
    font-weight: var(--tl-title-fw, 800) !important;
    line-height: 1.2 !important;
    color: var(--tl-title, #edfffe) !important;
}
.tl-section .tl-card .tl-card__text {
    margin: 0 !important;
    font-family: var(--tl-text-font, inherit) !important;
    font-size: var(--tl-text-sz, 16px) !important;
    font-weight: var(--tl-text-fw, 400) !important;
    line-height: 1.6 !important;
    color: var(--tl-text, rgba(200,236,232,0.58)) !important;
}

/* Icon-Liste */
.tl-card__bullets { list-style: none; margin: 12px 0 0; padding: 0; }
.tl-card__bullets li {
    display: flex; align-items: center; gap: 9px;
    margin: 6px 0;
    font-size: calc(var(--tl-text-sz, 16px) * .92);
    font-weight: var(--tl-text-fw, 400);
    color: var(--tl-text, rgba(200,236,232,0.72));
    line-height: 1.4;
}
.tl-right .tl-card__bullets li { flex-direction: row-reverse; }
.tl-bullet-ico {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    background: var(--tl-bullet-ico, var(--tl-title, #edfffe));
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.tl-bullet-ico.tl-bullet-img { background: none; }
.tl-bullet-ico.tl-bullet-img img { width: 100%; height: 100%; object-fit: contain; }

/* ── Text-/Titel-Ausrichtung (überschreibt die automatische Seiten-Ausrichtung) ── */
.tl-align-left  .tl-card__body { text-align: left; }
.tl-align-center .tl-card__body { text-align: center; }
.tl-align-right .tl-card__body { text-align: right; }

.tl-align-left  .tl-card__bullets li { justify-content: flex-start; flex-direction: row; text-align: left; }
.tl-align-center .tl-card__bullets li { justify-content: center; flex-direction: row; text-align: center; }
.tl-align-right .tl-card__bullets li { justify-content: flex-end; flex-direction: row-reverse; text-align: right; }

/* ── Mobile ── */
@media (max-width: 780px) {
    .tl-item,
    .tl-item.tl-left,
    .tl-item.tl-right {
        width: calc(100% - 54px);
        left: 54px;
        right: auto;
    }
    .tl-right .tl-card { flex-direction: row; text-align: left; }
    .tl-right .tl-card .tl-card__bullets,
    .tl-right .tl-card__bullets li { text-align: left; flex-direction: row; }
    .tl-card { padding: 16px 16px; gap: 14px; }
    .tl-media img.tl-photo,
    .tl-icon-wrap { width: min(var(--tl-img-sz, 112px), 34vw); height: min(var(--tl-img-sz, 112px), 34vw); }
    .tl-section .tl-card .tl-card__title { font-size: clamp(17px, 5vw, var(--tl-title-sz, 26px)) !important; }
    .tl-section .tl-card .tl-card__text  { font-size: clamp(13px, 3.6vw, var(--tl-text-sz, 16px)) !important; }
}

@media (prefers-reduced-motion: reduce) {
    .tl-item { transition: opacity .2s ease; transform: none; }
}


/* ── Notfall-Layout ──────────────────────────────────────────────────────────
   Greift, wenn das JS-Layout fehlschlaegt (z. B. Container mit Breite 0).
   Lieber schlicht untereinander als eine leere Sektion. */
.tl-section.tl-static .tl-wrapper { height: auto !important; }
.tl-section.tl-static .tl-svg { display: none; }
.tl-section.tl-static .tl-list { padding: 20px 0; }
.tl-section.tl-static .tl-item,
.tl-section.tl-static .tl-item.tl-left,
.tl-section.tl-static .tl-item.tl-right {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100%;
    opacity: 1 !important;
    transform: none !important;
    margin: 0 0 22px;
}
.tl-section.tl-static .tl-dot { display: none; }

/* Ohne JavaScript bleibt die Sektion leer – dann lieber gar keine Hoehe */
.tl-section:not([data-stpl-init]) .tl-wrapper { min-height: 0; }