/* History timeline of draft 3 (geschichte-timeline.html): the vertical "Prüfstrecke" of the quality page laid
   on its side. While scrolling, the section stays pinned, the track moves left, the green road fills from left
   to right and each stage appears when the road reaches it. Only loaded by geschichte-timeline.html. */

.kg { --kg-green: #017153; --kg-dark: #04382A; --kg-ink: #062C22; --kg-yellow: #FDF21E; --kg-grey: #EDEEED;
  --kg-card: 400px; --kg-gap: 90px; --kg-road: 56px; --kg-b: 7vh; --kg-s: 5vh;
  font-family: var(--_typography---font--body-font); color: var(--kg-ink); background: var(--kg-grey); }
.kg-ic { font-family: "Material Icons"; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; }

/* the tall outer section gives the scroll distance, the inner part stays on screen */
.kg-scroll { position: relative; }
.kg-pin { position: sticky; top: 0; height: 100vh; min-height: 620px; overflow: hidden; display: flex; flex-direction: column; }

.kg-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 4vw; padding: max(104px, 8vh) 6vw 0; }
.kg-head .tag-wrap { justify-content: flex-start; margin-bottom: 18px; }
.kg-head h2 { margin: 0; font: 500 clamp(2rem, 3.4vw, 3.4rem)/1.04 var(--_typography---font--heading-font); letter-spacing: -.035em; color: var(--kg-dark); }
/* the year of the stage the road has just reached, large on the right */
.kg-year { font: 500 clamp(3.4rem, 8vw, 8.4rem)/.82 var(--_typography---font--heading-font); letter-spacing: -.06em; color: var(--kg-green); font-variant-numeric: tabular-nums; }
.kg-year small { display: block; margin-bottom: 10px; font: 500 15px/1 var(--_typography---font--body-font); letter-spacing: 0; color: rgba(6, 44, 34, .6); text-align: right; }

/* track: stages side by side, the road runs underneath through all of them */
.kg-track { position: relative; flex: 1; display: flex; align-items: flex-end; gap: var(--kg-gap); padding: 0 26vw calc(var(--kg-b) + var(--kg-road) + var(--kg-s)) 6vw; width: max-content; will-change: transform; }
.kg-road { position: absolute; left: 0; right: 0; bottom: var(--kg-b); height: var(--kg-road); border-radius: 999px; background: rgba(1, 113, 83, .13); overflow: hidden; }
.kg-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--kg-green); border-radius: 0 999px 999px 0; }
.kg-fill::after { content: ""; position: absolute; left: 24px; right: 24px; top: 50%; height: 6px; margin-top: -3px;
  background: repeating-linear-gradient(90deg, var(--kg-yellow) 0 40px, transparent 40px 70px); }

.kg-stage { position: relative; flex: none; width: var(--kg-card); }
/* stem and pin connect the card with the road */
.kg-stage::after { content: ""; position: absolute; left: 40px; top: 100%; width: 2px; height: calc(var(--kg-s) + var(--kg-road) / 2); background: rgba(1, 113, 83, .3); }
.kg-pinpoint { position: absolute; z-index: 2; left: 26px; top: calc(100% + var(--kg-s) + var(--kg-road) / 2 - 15px); width: 30px; height: 30px; border-radius: 50%; background: var(--kg-green); border: 6px solid #fff; box-shadow: 0 4px 12px rgba(4, 56, 42, .22); transition: background-color .4s, transform .4s; }
.kg-stage.is-on .kg-pinpoint { background: var(--kg-yellow); transform: scale(1.2); }

.kg-card { background: #fff; border-radius: 14px; overflow: hidden; opacity: .28; transform: translateY(26px) scale(.97); transform-origin: bottom left;
  transition: opacity .7s, transform .8s cubic-bezier(.2, .8, .25, 1); }
.kg-stage.is-on .kg-card { opacity: 1; transform: none; }
.kg-card figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--kg-green); }
.kg-card figure img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.08); transition: transform 1.2s cubic-bezier(.2, .8, .25, 1); }
.kg-stage.is-on .kg-card figure img { transform: none; }
.kg-card figure.logo { background: var(--kg-yellow); display: grid; place-items: center; }
.kg-card figure.logo img { width: 34%; height: auto; object-fit: contain; }
.kg-card figure.doc { display: grid; place-items: center; }
.kg-card figure.doc img { width: auto; height: 84%; object-fit: contain; border-radius: 3px; box-shadow: 0 10px 24px rgba(0, 0, 0, .25); transform: rotate(-3deg); }
.kg-stage.is-on .kg-card figure.doc img { transform: rotate(-3deg); }
.kg-body { padding: 22px 24px 26px; }
.kg-when { display: block; margin-bottom: 6px; font: 500 15px/1 var(--_typography---font--body-font); color: var(--kg-green); }
.kg-body h3 { margin: 0 0 8px; font: 500 clamp(1.25rem, 1.5vw, 1.5rem)/1.15 var(--_typography---font--heading-font); letter-spacing: -.02em; color: var(--kg-dark); }
.kg-body p { margin: 0; font-size: 15.5px; line-height: 1.55; color: rgba(6, 44, 34, .74); }

/* hint below the header while nothing has moved yet */
.kg-hint { position: absolute; right: 6vw; bottom: 1.6vh; display: flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(6, 44, 34, .6); transition: opacity .4s; }
.kg-hint .kg-ic { font-size: 18px; }
.kg.is-moving .kg-hint { opacity: 0; }

/* note for Gianni: which facts are sourced, what the client still has to confirm */
.kg-note { padding: 5vw 6vw; background: #fff; }
.kg-note h2 { margin: 0 0 14px; font: 500 clamp(1.5rem, 2vw, 2rem)/1.1 var(--_typography---font--heading-font); color: var(--kg-dark); }
.kg-note ul { margin: 0; padding-left: 1.2em; max-width: 60rem; font-size: 16px; line-height: 1.6; }

@media (max-width: 767px) {
  .kg { --kg-card: 78vw; --kg-gap: 36px; --kg-road: 40px; }
  .kg-head { flex-direction: column; align-items: flex-start; gap: 14px; padding: 96px 20px 0; }
  .kg-year { font-size: 3.2rem; }
  .kg-year small { text-align: left; }
  .kg-track { padding-left: 20px; padding-right: 16vw; }
  .kg-body { padding: 18px 18px 20px; }
  .kg-hint { right: 20px; }
  .kg-note { padding: 48px 20px; }
}
@media (max-height: 760px) and (min-width: 768px) {
  .kg { --kg-card: 340px; }
  .kg-card figure { aspect-ratio: 16 / 8; }
}
@media (prefers-reduced-motion: reduce) {
  .kg-card, .kg-card figure img, .kg-pinpoint { transition: none; }
}