/* Compact variant of the history timeline (geschichte-timeline-kompakt.html), loaded after kern-geschichte.css:
   cards without photos (icon in a circle on the left, short title and one or two sentences on the right),
   the road runs through the middle and the cards alternate above and below it (Gianni, 22.09.2026). */

.kg { --kg-card: 360px; --kg-gap: 36px; --kg-stem: 34px; }

.kg-track { align-items: stretch; padding-bottom: 0; }
.kg-road { top: 50%; bottom: auto; transform: translateY(-50%); }

.kg-stage { height: 100%; }
.kg-card { position: absolute; left: 0; right: 0; display: flex; gap: 18px; align-items: flex-start; padding: 22px 22px 24px; }
.kg-stage:nth-of-type(odd) .kg-card { bottom: calc(50% + var(--kg-road) / 2 + var(--kg-stem)); transform-origin: bottom left; }
.kg-stage:nth-of-type(even) .kg-card { top: calc(50% + var(--kg-road) / 2 + var(--kg-stem)); transform-origin: top left; transform: translateY(-26px) scale(.97); }
.kg-stage.is-on .kg-card { transform: none; }

/* stem from the card to the pin in the middle of the road */
.kg-stage::after { top: auto; height: var(--kg-stem); }
.kg-stage:nth-of-type(odd)::after { bottom: calc(50% + var(--kg-road) / 2); }
.kg-stage:nth-of-type(even)::after { top: calc(50% + var(--kg-road) / 2); }
.kg-pinpoint { top: 50%; margin-top: -15px; }

/* round icon like the counters on the start page: yellow icon on a Kern green circle */
.kg-icon { flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--kg-green); color: var(--kg-yellow); display: grid; place-items: center; }
.kg-icon .kg-ic { font-size: 27px; }
.kg-body { padding: 0; }
.kg-body h3 { font-size: clamp(1.15rem, 1.3vw, 1.35rem); }
.kg-body p { font-size: 15px; }

@media (max-width: 767px) {
  .kg { --kg-card: 74vw; --kg-gap: 20px; --kg-stem: 22px; }
  .kg-card { gap: 14px; padding: 18px; }
  .kg-icon { width: 46px; height: 46px; }
  .kg-icon .kg-ic { font-size: 23px; }
}
@media (max-height: 760px) and (min-width: 768px) {
  .kg { --kg-card: 330px; --kg-stem: 22px; }
}
/* stem and pin under the centre of the icon */
.kg-stage::after { left: 49px; }
.kg-pinpoint { left: 35px; }
@media (max-width: 767px) { .kg-stage::after { left: 40px; } .kg-pinpoint { left: 26px; } }

/* on the about page the timeline is a Kern green section between the white intro and the grey "Haltung"
   (Gianni, 22.09.2026): white title, yellow year, darker green road, white cards */
.kg.kg-green { background: #017153; }
.kg-green .kg-head h2 { color: #fff; }
.kg-green .kg-year { color: #FDF21E; }
.kg-green .kg-year small { color: rgba(255, 255, 255, .72); }
.kg-green .kg-road { background: rgba(255, 255, 255, .14); }
.kg-green .kg-fill { background: #034B38; }
.kg-green .kg-stage::after { background: rgba(255, 255, 255, .4); }
.kg-green .kg-pinpoint { background: #034B38; }
.kg-green .kg-stage.is-on .kg-pinpoint { background: #FDF21E; }
.kg-green .kg-card { opacity: .4; }
.kg-green .kg-stage.is-on .kg-card { opacity: 1; }
.kg-green .kg-hint { color: rgba(255, 255, 255, .72); }
.kg-green .kg-head { padding-top: max(72px, 8vh); }
/* same gradient as the Einblicke slider on the service pages (kern-leistung.css): darker green at top and bottom,
   full Kern green as a band behind the road. Set on the pinned panel, so it always fills exactly one screen */
.kg-green .kg-pin { background: linear-gradient(180deg, #034B38 0%, #017153 38%, #017153 72%, #034B38 100%); }
/* year on the about page a bit smaller than on the lab pages (Gianni, 22.09.2026): 101 instead of 115 px at 1440 */
.kg-green .kg-year { font-size: clamp(3rem, 7vw, 7.4rem); }
@media (max-width: 767px) { .kg-green .kg-year { font-size: 2.8rem; } }