/* ================================================================
   Timeline Wizard – Public Styles  v1.2.0
   ================================================================ */

.twz-wrapper {
  --twz-primary:        #6366f1;
  --twz-secondary:      #8b5cf6;
  --twz-accent:         #f59e0b;
  --twz-bg:             #ffffff;
  --twz-text:           #1e1b4b;
  --twz-line-color:     #e0e7ff;
  --twz-line-width:     3px;
  --twz-dot-size:       48px;
  --twz-card-radius:    12px;
  --twz-card-padding-v: 20px;
  --twz-card-padding-h: 24px;
  --twz-font-family:    Georgia, serif;
  --twz-font-size:      15px;
  --twz-spacing:        40px;
  --twz-anim-duration:  600ms;
  /* Typography detail */
  --twz-heading-size:   17px;
  --twz-heading-color:  #1e1b4b;
  --twz-heading-weight: 700;
  --twz-heading-style:  normal;
  --twz-date-size:      12px;
  --twz-date-color:     #6366f1;
  --twz-date-weight:    600;
  --twz-date-style:     normal;
  --twz-body-size:      14px;
  --twz-body-color:     #1e1b4b;
  --twz-body-weight:    400;
  --twz-body-style:     normal;
  /* Arrow size – half the arrow "depth" */
  --twz-arrow:          10px;

  font-family: var(--twz-font-family);
  font-size:   var(--twz-font-size);
  color:       var(--twz-text);
  background:  var(--twz-bg);
  padding:     40px 20px;
  box-sizing:  border-box;
}

/* ── Timeline Container ──────────────────────────────────────────── */
.twz-timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

/* ── Central vertical line ───────────────────────────────────────── */
.twz-timeline::before {
  content: '';
  position: absolute;
  top: calc(var(--twz-dot-size) / 2);
  bottom: calc(var(--twz-dot-size) / 2);
  width: var(--twz-line-width);
  background: var(--twz-line-color);
  left: 50%;
  transform: translateX(-50%);
  border-radius: calc(var(--twz-line-width) / 2);
}

[data-connector="dashed"]  .twz-timeline::before { background: none; border-left: var(--twz-line-width) dashed var(--twz-line-color); }
[data-connector="dotted"]  .twz-timeline::before { background: none; border-left: var(--twz-line-width) dotted var(--twz-line-color); }
[data-connector="gradient"].twz-timeline::before { background: linear-gradient(to bottom, var(--twz-primary), var(--twz-secondary), var(--twz-accent)); }

/* ── Items ───────────────────────────────────────────────────────── */
.twz-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: var(--twz-spacing);
  position: relative;
}
.twz-item:last-child { margin-bottom: 0; }

/* ── Dot ─────────────────────────────────────────────────────────── */
.twz-dot {
  flex-shrink: 0;
  width:  var(--twz-dot-size);
  height: var(--twz-dot-size);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--twz-primary), var(--twz-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
  box-shadow: 0 0 0 4px var(--twz-bg), 0 0 0 6px var(--twz-primary);
  transition: transform .3s ease, box-shadow .3s ease;
}
.twz-dot:hover {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px var(--twz-bg), 0 0 0 8px var(--twz-primary), 0 0 20px rgba(99,102,241,.3);
}
.twz-dot-inner {
  font-size: calc(var(--twz-dot-size) * .42);
  line-height: 1;
  color: #fff;
  user-select: none;
}

/* ── Card ────────────────────────────────────────────────────────── */
.twz-card {
  flex: 1;
  background: var(--twz-bg);
  border: 1.5px solid var(--twz-line-color);
  border-radius: var(--twz-card-radius);
  padding: var(--twz-card-padding-v) var(--twz-card-padding-h);
  position: relative;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease;
}
.twz-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  transform: translateY(-2px);
  border-color: var(--twz-accent);
}

/* ── Arrow – always flush with the card border, not the rounded corner ──
   The arrow is positioned at top: card-radius so it sits on the flat
   edge segment that starts right after the corner curve ends.
   We use a clip trick with overflow:visible so the arrow never floats. */
.twz-card::before {
  content: '';
  position: absolute;
  /* Sit at the straight-edge segment, offset by border-radius from top */
  top: calc(var(--twz-card-radius) + var(--twz-arrow));
  width: 0;
  height: 0;
  border-top:    var(--twz-arrow) solid transparent;
  border-bottom: var(--twz-arrow) solid transparent;
}

/* ── Typography ──────────────────────────────────────────────────── */
.twz-date {
  display: inline-block;
  font-size:   var(--twz-date-size);
  font-weight: var(--twz-date-weight);
  font-style:  var(--twz-date-style);
  color:       var(--twz-date-color);
  margin-bottom: 6px;
}

.twz-item-title {
  font-size:   var(--twz-heading-size);
  font-weight: var(--twz-heading-weight);
  font-style:  var(--twz-heading-style);
  color:       var(--twz-heading-color);
  margin: 4px 0 8px;
  line-height: 1.3;
}

.twz-content {
  font-size:   var(--twz-body-size);
  font-weight: var(--twz-body-weight);
  font-style:  var(--twz-body-style);
  color:       var(--twz-body-color);
  line-height: 1.65;
}
.twz-content p:last-child { margin-bottom: 0; }

.twz-image {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  border-radius: calc(var(--twz-card-radius) - 4px);
  margin-top: 12px;
  display: block;
}

.twz-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 16px;
  background: var(--twz-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  font-size: .85em;
  font-weight: 600;
  transition: opacity .2s, transform .2s;
}
.twz-link::after { content: ' →'; }
.twz-link:hover  { opacity: .85; transform: translateX(2px); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT VARIANTS
═══════════════════════════════════════════════════════════════════ */

/* ── ALTERNATING ───────────────────────────────────────────────── */
[data-layout="alternating"] .twz-item:nth-child(odd) {
  flex-direction: row;
  padding-left: calc(50% - var(--twz-dot-size) / 2);
}
[data-layout="alternating"] .twz-item:nth-child(even) {
  flex-direction: row-reverse;
  padding-right: calc(50% - var(--twz-dot-size) / 2);
}
/* Arrow: odd items → arrow points left (card is to the right of dot) */
[data-layout="alternating"] .twz-item:nth-child(odd) .twz-card::before {
  left: calc(-1 * var(--twz-arrow));
  border-right: var(--twz-arrow) solid var(--twz-line-color);
}
/* Arrow: even items → arrow points right */
[data-layout="alternating"] .twz-item:nth-child(even) .twz-card::before {
  right: calc(-1 * var(--twz-arrow));
  border-left: var(--twz-arrow) solid var(--twz-line-color);
}

/* ── LEFT ──────────────────────────────────────────────────────── */
[data-layout="left"] .twz-timeline::before { left: calc(var(--twz-dot-size) / 2); transform: none; }
[data-layout="left"] .twz-item { flex-direction: row; }
[data-layout="left"] .twz-card::before {
  left: calc(-1 * var(--twz-arrow));
  border-right: var(--twz-arrow) solid var(--twz-line-color);
}

/* ── RIGHT ─────────────────────────────────────────────────────── */
[data-layout="right"] .twz-timeline::before { left: auto; right: calc(var(--twz-dot-size) / 2); transform: none; }
[data-layout="right"] .twz-item { flex-direction: row-reverse; }
[data-layout="right"] .twz-card::before {
  right: calc(-1 * var(--twz-arrow));
  border-left: var(--twz-arrow) solid var(--twz-line-color);
}

/* ── CENTERED ──────────────────────────────────────────────────── */
[data-layout="centered"] .twz-item {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 10%;
}
[data-layout="centered"] .twz-card::before { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════════════ */
.twz-item {
  transition: opacity var(--twz-anim-duration) ease,
              transform var(--twz-anim-duration) ease;
}
.twz-item.twz-animate-init { opacity: 0; }

[data-animation="fade-up"]  .twz-item.twz-animate-init { transform: translateY(36px); }
[data-animation="fade-up"]  .twz-item.twz-animate-in   { opacity: 1; transform: translateY(0); }

[data-layout="alternating"] [data-animation="slide-in"] .twz-item:nth-child(odd).twz-animate-init  { transform: translateX(-56px); }
[data-layout="alternating"] [data-animation="slide-in"] .twz-item:nth-child(even).twz-animate-init { transform: translateX(56px); }
[data-layout="left"]        [data-animation="slide-in"] .twz-item.twz-animate-init { transform: translateX(-56px); }
[data-layout="right"]       [data-animation="slide-in"] .twz-item.twz-animate-init { transform: translateX(56px); }
[data-layout="centered"]    [data-animation="slide-in"] .twz-item.twz-animate-init { transform: translateY(36px); }
[data-animation="slide-in"] .twz-item.twz-animate-in { opacity: 1; transform: translate(0); }

[data-animation="zoom"] .twz-item.twz-animate-init { transform: scale(.82); }
[data-animation="zoom"] .twz-item.twz-animate-in   { opacity: 1; transform: scale(1); }

[data-animation="flip"] .twz-item.twz-animate-init { transform: perspective(600px) rotateX(-28deg); }
[data-animation="flip"] .twz-item.twz-animate-in   { opacity: 1; transform: perspective(600px) rotateX(0); }

[data-animation="none"] .twz-item.twz-animate-init,
[data-animation="none"] .twz-item.twz-animate-in   { opacity: 1; transform: none; }

@keyframes twz-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--twz-bg), 0 0 0 6px var(--twz-primary); }
  50%       { box-shadow: 0 0 0 4px var(--twz-bg), 0 0 0 10px var(--twz-primary), 0 0 18px rgba(99,102,241,.28); }
}
.twz-item.twz-animate-in .twz-dot { animation: twz-pulse .8s ease-out .3s; }

@keyframes twz-line-grow {
  from { transform: scaleY(0) translateX(-50%); transform-origin: top; }
  to   { transform: scaleY(1) translateX(-50%); }
}
.twz-timeline::before { animation: twz-line-grow .9s ease-out both; }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
  [data-layout="alternating"] .twz-item:nth-child(n),
  [data-layout="right"] .twz-item {
    flex-direction: row;
    padding-left: 0;
    padding-right: 0;
  }
  [data-layout="alternating"] .twz-timeline::before,
  [data-layout="right"]       .twz-timeline::before {
    left: calc(var(--twz-dot-size) / 2);
    right: auto;
    transform: none;
  }
  [data-layout="alternating"] .twz-item:nth-child(n) .twz-card::before,
  [data-layout="right"] .twz-card::before {
    left:  calc(-1 * var(--twz-arrow));
    right: auto;
    border-right: var(--twz-arrow) solid var(--twz-line-color);
    border-left:  none;
  }
  .twz-wrapper { padding: 24px 14px; }
}






/* ═══════════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL MODE v1.8.0
   outer (tall, im Flow) > panel (sticky 100vh) > track (flex, bewegt)
═══════════════════════════════════════════════════════════════════ */

/* outer: Platzhalter im Seitenfluss, Höhe per JS gesetzt */
.twz-h-outer {
  display: block;
  width: 100%;
  /* height: JS */
}

/* panel: sticky, klemmt sich an top:0, zeigt 100vh */
.twz-h-outer .twz-h-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  background: var(--twz-bg, #131313);
}

/* track: flex-row, per JS translateX verschoben */
.twz-h-outer .twz-h-track {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;
  padding: 0 8vw;
  will-change: transform;
  position: relative;
  gap: 0;
}

/* Horizontale Mittellinie */
.twz-h-outer .twz-h-track::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: var(--twz-line-width, 2px);
  background: var(--twz-line-color, rgba(255,255,255,0.15));
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
}
[data-connector="dashed"]  .twz-h-outer .twz-h-track::after { background: none; border-top: var(--twz-line-width, 2px) dashed var(--twz-line-color); height: 0; }
[data-connector="dotted"]  .twz-h-outer .twz-h-track::after { background: none; border-top: var(--twz-line-width, 2px) dotted var(--twz-line-color); height: 0; }
[data-connector="gradient"].twz-h-outer .twz-h-track::after { background: linear-gradient(to right, var(--twz-primary), var(--twz-secondary), var(--twz-accent)); }

/* Items */
.twz-h-outer .twz-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  width: clamp(220px, 26vw, 360px);
  padding: 0 clamp(10px, 1.5vw, 24px);
  margin: 0;
  position: relative;
  z-index: 1;
}
.twz-h-outer .twz-item:nth-child(odd)  { flex-direction: column; }
.twz-h-outer .twz-item:nth-child(even) { flex-direction: column-reverse; }

/* Dot */
.twz-h-outer .twz-dot {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  margin: 0;
  width:  var(--twz-dot-size, 34px);
  height: var(--twz-dot-size, 34px);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--twz-primary), var(--twz-secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px var(--twz-bg, #131313), 0 0 0 6px var(--twz-primary);
}
.twz-h-outer .twz-dot-inner {
  font-size: calc(var(--twz-dot-size, 34px) * 0.42);
  color: #fff;
  line-height: 1;
}

/* Stem */
.twz-h-outer .twz-h-stem {
  flex-shrink: 0;
  width: var(--twz-line-width, 2px);
  height: clamp(24px, 4vh, 56px);
  background: var(--twz-line-color, rgba(255,255,255,0.15));
}

/* Card */
.twz-h-outer .twz-card {
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  background: var(--twz-bg, #131313);
  border: 1.5px solid var(--twz-line-color);
  border-radius: var(--twz-card-radius, 12px);
  padding: var(--twz-card-padding-v, 20px) var(--twz-card-padding-h, 24px);
  box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.twz-h-outer .twz-card::before { display: none; }

/* Typography */
.twz-h-outer .twz-date {
  display: block;
  font-size: var(--twz-date-size, 12px);
  font-weight: var(--twz-date-weight, 600);
  font-style: var(--twz-date-style, normal);
  color: var(--twz-date-color, #6366f1);
  margin-bottom: 6px;
}
.twz-h-outer .twz-item-title {
  font-size: var(--twz-heading-size, 17px);
  font-weight: var(--twz-heading-weight, 700);
  font-style: var(--twz-heading-style, normal);
  color: var(--twz-heading-color, #fff);
  margin: 4px 0 8px;
  line-height: 1.3;
}
.twz-h-outer .twz-content {
  font-size: var(--twz-body-size, 14px);
  font-weight: var(--twz-body-weight, 400);
  font-style: var(--twz-body-style, normal);
  color: var(--twz-body-color, #bebebe);
  line-height: 1.65;
}
.twz-h-outer .twz-content p:last-child { margin-bottom: 0; }
.twz-h-outer .twz-image {
  width: 100%;
  border-radius: calc(var(--twz-card-radius, 12px) - 4px);
  margin-top: 12px;
  display: block;
  object-fit: cover;
  max-height: 220px;
}
.twz-h-outer .twz-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  padding: 7px 16px;
  background: var(--twz-accent);
  color: #fff;
  text-decoration: none;
  border-radius: 20px;
  font-size: .85em;
  font-weight: 600;
}
.twz-h-outer .twz-link::after { content: ' →'; }

/* Progress bar */
.twz-h-outer .twz-h-progress {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(to right, var(--twz-primary), var(--twz-secondary));
  z-index: 10;
  pointer-events: none;
}

/* Hint */
.twz-h-outer .twz-h-hint {
  position: absolute;
  bottom: 18px; right: 28px;
  font-family: var(--twz-font-family, sans-serif);
  font-size: 12px;
  color: var(--twz-text, #bebebe);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.4s;
}