/* KATAI Timeline — Frontend. Alles scoped auf .kt-tl, per CSS-Variablen steuerbar. */
.kt-tl{
	--kt-accent:#2e7d32; --kt-track:#dfe5df; --kt-line-w:3px; --kt-dot:22px;
	--kt-card-bg:#fff; --kt-card-text:#2b2b2b; --kt-card-border:#ececec; --kt-radius:10px;
	--kt-shadow:0 10px 30px rgba(0,0,0,.08); --kt-max:1100px; --kt-img-w:320px; --kt-gap:56px; --kt-label:var(--kt-accent);
	--kt-anchor:30px;                 /* gemeinsame Höhe für Punkt + Pfeil (ab Eintrag-Oberkante) */
	--kt-half:calc(50% + 30px);
	max-width:var(--kt-max); margin:0 auto; box-sizing:border-box;
	background:var(--kt-wrap-bg,transparent);
	border:var(--kt-wrap-bw,0) solid var(--kt-wrap-border,transparent);
	border-radius:var(--kt-wrap-radius,0);
	box-shadow:var(--kt-wrap-shadow,none);
	padding:var(--kt-wrap-pad,0);
}
.kt-tl *,.kt-tl *::before,.kt-tl *::after{ box-sizing:border-box; }
.kt-track{ position:relative; }

/* Vertikale Linie + Scroll-Fill */
/* Standard: von erster Punkt-Höhe bis unten; JS trimmt das untere Ende exakt auf den letzten Punkt. */
.kt-line{ position:absolute; top:var(--kt-anchor); bottom:auto; height:calc(100% - var(--kt-anchor)); width:var(--kt-line-w); background:var(--kt-track); border-radius:var(--kt-line-w); }
.kt-line-fill{ position:absolute; top:0; left:0; width:100%; height:100%; background:var(--kt-accent); border-radius:inherit; transition:height .12s linear; }
.kt-tl[data-kt-fill] .kt-line-fill{ height:0; }
.kt-lay-right .kt-line{ left:calc(var(--kt-dot) / 2); transform:translateX(-50%); }
.kt-lay-left  .kt-line{ right:calc(var(--kt-dot) / 2); transform:translateX(50%); }
.kt-lay-alternating .kt-line,.kt-lay-image .kt-line{ left:50%; transform:translateX(-50%); }

/* Eintrag — Abstand über margin, Karte/Bild starten an der Oberkante */
.kt-item{ position:relative; margin-bottom:var(--kt-gap); }
.kt-item:last-child{ margin-bottom:0; }

/* Punkt / Marker — immer auf der Linie UND auf --kt-anchor zentriert (Größe egal) */
.kt-dot{
	position:absolute; top:var(--kt-anchor); width:var(--kt-dot); height:var(--kt-dot);
	border-radius:50%; background:var(--kt-accent); display:flex; align-items:center; justify-content:center; z-index:2;
}
.kt-lay-right .kt-dot{ left:calc(var(--kt-dot) / 2); transform:translate(-50%,-50%); }
.kt-lay-left  .kt-dot{ right:calc(var(--kt-dot) / 2); transform:translate(50%,-50%); }
.kt-lay-alternating .kt-dot,.kt-lay-image .kt-dot{ left:50%; transform:translate(-50%,-50%); }
.kt-dot-hollow .kt-dot{ background:var(--kt-card-bg); border:2px solid var(--kt-accent); }
.kt-has-icons .kt-dot{ width:calc(var(--kt-dot) + 18px); height:calc(var(--kt-dot) + 18px); }
.kt-dot svg,.kt-dot i,.kt-dot img{ width:var(--kt-icon-size,56%); height:var(--kt-icon-size,56%); fill:var(--kt-icon-color,#fff); color:var(--kt-icon-color,#fff); font-size:calc(var(--kt-dot) * .6); line-height:1; display:block; }
.kt-dot-hollow .kt-dot svg,.kt-dot-hollow .kt-dot i{ fill:var(--kt-accent); color:var(--kt-accent); }

/* Karte */
.kt-card{
	position:relative; background:var(--kt-card-bg); color:var(--kt-card-text);
	border:1px solid var(--kt-card-border); border-radius:var(--kt-radius); box-shadow:var(--kt-shadow);
	padding:22px 26px;
}
.kt-label{ display:block; color:var(--kt-label); font-weight:700; font-size:var(--kt-label-size,.82em); letter-spacing:.04em; margin-bottom:6px; }
.kt-title{ margin:0 0 8px; font-size:var(--kt-title-size,1.25em); color:var(--kt-title-color,inherit); line-height:1.25; font-weight:700; }
.kt-sub{ font-style:italic; opacity:.85; margin-bottom:8px; }
.kt-text{ line-height:1.6; font-size:var(--kt-text-size,1em); }
.kt-text :last-child{ margin-bottom:0; }
.kt-text :first-child{ margin-top:0; }
.kt-card-img{ margin-bottom:16px; }
.kt-card-img img{ display:block; width:100%; border-radius:6px; }

/* Kartenplatzierung — Karten rechts / links / abwechselnd */
.kt-lay-right .kt-card{ margin-left:calc(var(--kt-dot) + 30px); }
.kt-lay-left  .kt-card{ margin-right:calc(var(--kt-dot) + 30px); }
.kt-lay-alternating .kt-side-left  .kt-card{ margin-right:var(--kt-half); }
.kt-lay-alternating .kt-side-right .kt-card{ margin-left:var(--kt-half); }

/* Layout Bild + Karte: 2-Spalten-Grid, Bild und Karte auf GLEICHER Höhe, Linie mittig */
.kt-lay-image .kt-item{ display:grid; grid-template-columns:1fr 1fr; column-gap:calc(var(--kt-dot) + 56px); align-items:start; }
.kt-media img{ display:block; width:100%; max-width:var(--kt-img-w); border-radius:var(--kt-radius); }
.kt-lay-image.kt-img-left  .kt-media{ grid-column:1; justify-self:end; }
.kt-lay-image.kt-img-left  .kt-card { grid-column:2; justify-self:start; }
.kt-lay-image.kt-img-right .kt-media{ grid-column:2; justify-self:start; }
.kt-lay-image.kt-img-right .kt-card { grid-column:1; justify-self:end; }

/* Sprechblasen-Pfeil — auf derselben Achse wie der Punkt (--kt-anchor) */
.kt-has-arrow .kt-card::before,.kt-has-arrow .kt-card::after{
	content:""; position:absolute; top:var(--kt-anchor); transform:translateY(-50%);
	width:0; height:0; border:11px solid transparent;
}
.kt-has-arrow .kt-side-right .kt-card::before{ left:-21px; border-right-color:var(--kt-card-bg); }
.kt-has-arrow .kt-side-left  .kt-card::before{ right:-21px; border-left-color:var(--kt-card-bg); }
.kt-has-arrow .kt-side-right .kt-card::after{ left:-22px; border-right-color:var(--kt-card-border); z-index:-1; }
.kt-has-arrow .kt-side-left  .kt-card::after{ right:-22px; border-left-color:var(--kt-card-border); z-index:-1; }

/* Datum/Jahr auf der Gegenseite der Linie (auf Punkt-Höhe) */
.kt-date{ position:absolute; top:var(--kt-anchor); transform:translateY(-50%); color:var(--kt-date-color); font-weight:600; font-size:1.05em; white-space:nowrap; }
.kt-lay-alternating .kt-side-left  .kt-date{ left:var(--kt-half); }
.kt-lay-alternating .kt-side-right .kt-date{ right:var(--kt-half); text-align:right; }
.kt-lay-right .kt-date{ right:calc(100% - var(--kt-dot)); text-align:right; }   /* Linie links → Datum links davon */
.kt-lay-left  .kt-date{ left:calc(100% - var(--kt-dot)); }                       /* Linie rechts → Datum rechts davon */

/* aktiver Zustand (Scroll-Fill erreicht den Punkt) */
.kt-tl[data-kt-fill] .kt-dot{ opacity:.5; transition:opacity .3s; }
.kt-tl[data-kt-fill] .kt-item.is-active .kt-dot{ opacity:1; }
.kt-theme-dark .kt-sub{ opacity:.7; }

/* Responsive: einspaltige Timeline links */
@media (max-width:782px){
	.kt-tl{ --kt-half:0; }
	.kt-line{ left:calc(var(--kt-dot) / 2) !important; right:auto !important; transform:translateX(-50%) !important; }
	.kt-dot{ left:calc(var(--kt-dot) / 2) !important; right:auto !important; transform:translate(-50%,-50%) !important; }
	.kt-lay-image .kt-item{ display:block; }
	.kt-card,.kt-lay-image .kt-card{ margin:0 0 0 calc(var(--kt-dot) + 26px) !important; }
	.kt-lay-image .kt-media{ margin:0 0 14px calc(var(--kt-dot) + 26px); }
	.kt-lay-image .kt-media img{ max-width:100%; }
	.kt-has-arrow .kt-card::before{ left:-21px !important; right:auto !important; border-right-color:var(--kt-card-bg) !important; border-left-color:transparent !important; }
	.kt-has-arrow .kt-card::after{ left:-22px !important; right:auto !important; border-right-color:var(--kt-card-border) !important; border-left-color:transparent !important; }
	.kt-date{ position:static !important; transform:none !important; display:block; left:auto !important; right:auto !important; text-align:left !important; margin:0 0 4px calc(var(--kt-dot) + 26px); }
}