/*
  Sammlung / Geschichte: eigene, responsive Zeitleiste.
  Die Regeln sind absichtlich auf .history-* begrenzt, damit Galerie,
  Statistik und die übrigen Seiten unverändert bleiben.
*/
.history-section{
  padding-top:clamp(28px,5vw,64px);
  padding-bottom:clamp(48px,7vw,92px);
}

.history-page{max-width:1120px}

.history-intro{
  max-width:780px;
  margin:0 auto 18px;
  text-align:center;
}

.history-intro .eyebrow{
  margin:0 0 9px;
  color:var(--accent);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.history-intro h1{
  margin:0 0 13px;
  font-size:clamp(2rem,4.6vw,3.45rem);
  line-height:1.08;
  letter-spacing:-.045em;
}

.history-lead{
  margin:0;
  color:#d5deeb;
  font-size:clamp(1rem,1.6vw,1.15rem);
  line-height:1.75;
}

.history-timeline{
  --history-meta:150px;
  --history-gap:32px;
  --history-dot:14px;
  /* Start exactly at the first station; there is no lead-in above it. */
  --history-rail-start:37px;
  --history-rail-end:28px;
  --history-progress:0%;
  --history-marker-progress:0%;
  position:relative;
  margin-top:30px;
}

.history-steps{
  display:grid;
  gap:38px;
}

.history-step{
  position:relative;
  display:grid;
  grid-template-columns:var(--history-meta) var(--history-gap) minmax(0,1fr);
  min-width:0;
}

.history-step-meta{
  grid-column:1;
  grid-row:1;
  position:relative;
  min-width:0;
  padding-top:28px;
  text-align:right;
}

.history-year{
  display:block;
  min-width:0;
  color:rgba(183,197,216,.42);
  font-size:.84rem;
  font-weight:800;
  line-height:1.3;
  text-align:right;
  white-space:nowrap;
  transition:color .4s ease,font-size .4s ease,text-shadow .4s ease;
}

.history-step-dot{
  position:absolute;
  top:30px;
  right:calc((var(--history-gap) / -2) - (var(--history-dot) / 2));
  z-index:2;
  display:block;
  width:var(--history-dot);
  height:var(--history-dot);
  margin:0;
  border:2px solid #6f829b;
  border-radius:50%;
  background:var(--bg);
  box-shadow:0 0 0 5px rgba(6,16,29,.65);
  transition:border-color .35s ease,background-color .35s ease,box-shadow .35s ease,transform .35s ease;
}

.history-rail{
  position:absolute;
  z-index:0;
  top:var(--history-rail-start);
  bottom:var(--history-rail-end);
  left:calc(var(--history-meta) + (var(--history-gap) / 2));
  width:2px;
  pointer-events:none;
}

.history-rail-track,
.history-rail-progress{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  border-radius:999px;
}

.history-rail-track{
  height:100%;
  background:rgba(145,169,198,.22);
}

.history-rail-progress{
  height:var(--history-progress);
  background:linear-gradient(180deg,var(--brand),#f37a72);
  box-shadow:0 0 14px rgba(216,81,79,.38);
  /* The red line and white marker use the same duration and easing so their
     endpoints never drift apart while scrolling in either direction. */
  transition:height 1.1s cubic-bezier(.22,.7,.3,1);
}

.history-rail-marker{
  position:absolute;
  top:var(--history-marker-progress);
  left:50%;
  display:block;
  width:13px;
  height:13px;
  border:2px solid #fff;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.14),0 0 16px rgba(255,255,255,.45);
  transform:translate(-50%,-50%);
  /* A calm, damped trail keeps the marker from snapping between stations. */
  transition:top 1.1s cubic-bezier(.22,.7,.3,1);
  z-index:1;
}

.history-card{
  grid-column:3;
  grid-row:1;
  position:relative;
  z-index:1;
  min-width:0;
  padding:26px 30px 30px;
  border:1px solid rgba(177,204,235,.19);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(24,42,66,.86),rgba(10,23,40,.82));
  box-shadow:0 18px 44px rgba(2,8,18,.3),inset 0 1px 0 rgba(255,255,255,.05);
  transition:opacity .45s ease,transform .45s ease,border-color .45s ease,box-shadow .45s ease,background .45s ease;
}

.history-card-heading{
  display:block;
  min-width:0;
  margin-bottom:15px;
}

.history-card h2{
  min-width:0;
  margin:0;
  color:var(--text);
  font-size:clamp(1.25rem,2vw,1.7rem);
  line-height:1.25;
  letter-spacing:-.025em;
}

.history-card p{
  max-width:72ch;
  margin:0;
  color:var(--muted);
  line-height:1.72;
}

.history-card p + p{margin-top:14px}
.history-card strong{color:var(--text);font-weight:700}

.history-enhanced .history-step:not(.is-active) .history-card{opacity:.69;transform:translateY(8px)}
.history-enhanced .history-step.is-past .history-card{opacity:.86;transform:none}
.history-enhanced .history-step.is-active .history-card{
  opacity:1;
  transform:none;
  border-color:rgba(239,106,103,.48);
  background:linear-gradient(180deg,rgba(24,42,66,.96),rgba(8,22,39,.92));
  box-shadow:0 20px 48px rgba(2,8,18,.38),0 0 0 1px rgba(216,81,79,.08),inset 0 1px 0 rgba(255,255,255,.06);
}
.history-enhanced .history-step.is-future .history-card{opacity:.58}

.history-enhanced .history-step.is-past .history-year{
  color:rgba(213,222,235,.76);
}

.history-enhanced .history-step.is-active .history-year{
  color:var(--text);
  font-size:.92rem;
  text-shadow:0 0 14px rgba(255,255,255,.16);
}

.history-enhanced .history-step.is-future .history-year{
  color:rgba(126,145,168,.38);
}

.history-step.is-past .history-step-dot,
.history-step.is-active .history-step-dot{
  border-color:var(--brand);
  background:var(--brand);
}

.history-step.is-active .history-step-dot{
  box-shadow:0 0 0 5px rgba(216,81,79,.2),0 0 18px rgba(216,81,79,.5);
  transform:scale(1.12);
}

.history-media{
  display:grid;
  gap:18px;
  margin-top:23px;
}

.history-media-first{grid-template-columns:minmax(0,1.35fr) minmax(190px,.9fr);align-items:start}

.history-feature-media,
.history-site-preview{margin:0;min-width:0}

.history-feature-media img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border:1px solid rgba(177,204,235,.18);
  border-radius:14px;
  background:#0b192b;
  object-fit:cover;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}

.history-feature-media figcaption,
.history-site-preview figcaption{
  margin-top:7px;
  color:#8fa5bf;
  font-size:.69rem;
  line-height:1.4;
}

.history-pick-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(72px,1fr));
  gap:11px;
  align-items:start;
  min-width:0;
}

.history-pick{
  display:grid;
  grid-template-rows:minmax(0,76px) auto;
  gap:6px;
  min-width:0;
  margin:0;
  text-align:center;
}

.history-pick img{
  display:block;
  width:100%;
  height:76px;
  min-width:0;
  object-fit:contain;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.35));
}

.history-pick figcaption{
  min-width:0;
  overflow-wrap:anywhere;
  color:#9db0c7;
  font-size:.63rem;
  line-height:1.3;
}

.history-pick-strip-growth{margin-top:22px;grid-template-columns:repeat(4,minmax(64px,1fr))}

.history-site-preview{margin-top:22px}

.history-browser{
  overflow:hidden;
  border:1px solid rgba(177,204,235,.2);
  border-radius:14px;
  background:#0b1b2e;
  box-shadow:0 12px 28px rgba(0,0,0,.24);
}

.history-browser-bar{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:38px;
  padding:0 12px;
  border-bottom:1px solid rgba(177,204,235,.14);
  background:rgba(36,57,84,.72);
}

.history-browser-bar span{display:block;width:7px;height:7px;border-radius:50%;background:#71859e}
.history-browser-bar span:first-child{background:#d8514f}
.history-browser-bar strong{margin-left:7px;color:#c9d6e5;font-size:.66rem;font-weight:700;letter-spacing:.03em}

.history-browser-body{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  align-items:end;
  min-height:130px;
  padding:24px 18px 17px;
  background:linear-gradient(135deg,rgba(18,42,67,.85),rgba(7,20,34,.95));
}

.history-browser-body i,
.history-browser-body b,
.history-browser-body em{
  display:block;
  height:58px;
  border:1px solid rgba(177,204,235,.18);
  border-radius:8px;
  background:linear-gradient(160deg,rgba(239,106,103,.78),rgba(68,100,139,.38));
}

.history-browser-body b{height:82px;background:linear-gradient(160deg,rgba(168,188,215,.48),rgba(65,100,138,.26))}
.history-browser-body em{height:44px;background:linear-gradient(160deg,rgba(239,106,103,.38),rgba(65,100,138,.24))}
.history-browser-body small{position:absolute;right:14px;bottom:8px;color:#9db0c7;font-size:.59rem;letter-spacing:.02em}

.history-today-footer{display:grid;gap:23px;margin-top:23px}
.history-today-footer .history-pick-strip{max-width:420px}
.history-callout{margin-top:0;padding-top:19px;border-top:1px solid var(--line)}
.history-callout .btn{margin-top:13px}

.history-outro{
  display:grid;
  grid-template-columns:var(--history-meta) var(--history-gap) minmax(0,1fr);
  min-width:0;
}

.history-outro-marker{
  grid-column:2;
  justify-self:center;
  align-self:end;
  width:12px;
  height:12px;
  margin-bottom:27px;
  border:2px solid rgba(177,204,235,.5);
  border-radius:50%;
  background:var(--bg);
  box-shadow:0 0 0 5px rgba(6,16,29,.65);
}

.history-outro-card{
  grid-column:3;
  min-width:0;
  padding:22px 26px 24px;
  border:1px solid rgba(177,204,235,.14);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(20,37,59,.58),rgba(8,20,35,.48));
}

.history-outro-kicker{
  margin:0 0 6px;
  color:var(--accent) !important;
  font-size:.68rem !important;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.history-outro-card h2{
  margin:0 0 6px;
  font-size:clamp(1.08rem,1.8vw,1.35rem);
}

.history-outro-card p:not(.history-outro-kicker){
  font-size:.88rem;
  line-height:1.55;
}

.history-outro-picks{
  display:flex;
  align-items:center;
  gap:17px;
  margin-top:15px;
}

.history-outro-picks img{
  display:block;
  width:50px;
  height:50px;
  object-fit:contain;
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.32));
}

@media (max-width:1023px){
  .history-timeline{--history-meta:116px;--history-gap:24px;--history-rail-start:37px;--history-rail-end:24px}
  .history-card{padding:23px 24px 27px}
  .history-media-first{grid-template-columns:minmax(0,1.2fr) minmax(170px,.8fr)}
  .history-outro-card{padding:20px 22px 22px}
}

@media (max-width:767px){
  .history-section{padding-top:22px;padding-bottom:58px}
  .history-intro{margin-bottom:5px;text-align:left}
  .history-intro h1{font-size:clamp(1.85rem,9vw,2.5rem);margin-bottom:9px}
  .history-lead{font-size:.95rem;line-height:1.62}
  .history-timeline{--history-meta:60px;--history-gap:16px;--history-dot:12px;--history-rail-start:28px;--history-rail-end:24px;margin-top:24px}
  .history-steps{gap:27px}
  .history-step-meta{padding-top:20px}
  .history-step-dot{top:22px}
  .history-year{font-size:.63rem;line-height:1.25;white-space:normal;overflow-wrap:anywhere}
  .history-rail-marker{width:12px;height:12px}
  .history-card{padding:19px 16px 22px;border-radius:16px}
  .history-card-heading{gap:8px;margin-bottom:11px}
  .history-card h2{font-size:1.14rem;line-height:1.27}
  .history-card p{font-size:.87rem;line-height:1.62}
  .history-card p + p{margin-top:11px}
  .history-media-first{display:block}
  .history-feature-media{margin-bottom:17px}
  .history-feature-media figcaption,.history-site-preview figcaption{font-size:.62rem}
  .history-pick-strip,
  .history-pick-strip-growth{grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:8px}
  .history-pick{grid-template-rows:minmax(0,62px) auto;gap:5px}
  .history-pick img{height:62px}
  .history-pick figcaption{font-size:.58rem}
  .history-site-preview{margin-top:17px}
  .history-browser-body{min-height:108px;padding:18px 12px 15px}
  .history-browser-body i{height:44px}.history-browser-body b{height:61px}.history-browser-body em{height:35px}
  .history-browser-body small{right:9px;bottom:6px;font-size:.52rem}
  .history-today-footer{gap:18px;margin-top:19px}
  .history-callout{padding-top:16px}
  .history-callout .contact-cta{width:100%}
  .history-outro{grid-template-columns:var(--history-meta) var(--history-gap) minmax(0,1fr)}
  .history-outro-marker{margin-bottom:20px;width:11px;height:11px}
  .history-outro-card{padding:17px 15px 19px;border-radius:15px}
  .history-outro-card p:not(.history-outro-kicker){font-size:.81rem}
  .history-outro-picks{gap:11px;margin-top:12px}
  .history-outro-picks img{width:42px;height:42px}
}

/* Reaching the final scroll position should feel deliberate rather than
   snapping the marker to the end of the rail. */
.history-at-bottom .history-rail-progress,
.history-at-bottom .history-rail-marker{
  transition-duration:1.25s;
  transition-timing-function:cubic-bezier(.22,.7,.3,1);
}

@media (prefers-reduced-motion:reduce){
  .history-card,.history-step-dot,.history-rail-progress,.history-rail-marker{transition:none !important}
}