/* Unser Weg (Nutzer 01.10.2026): vom Prototyp (Dezember 2025) zu Release 45 (0.0.45-beta, 02.10.2026), vor den Preisen.
   Zeitleiste mit einem Strich je Release, drei Phasen mit Meilenstein-Karten, darunter Hard Facts. Logik in weg.js.
   Einflüge nur am Desktop (#weg.is-pre → .is-in), auf dem Handy keine (Regel Handy-Ansicht).
   Darkmode-Regeln in der Form html[data-bs-theme="dark"] …, wie im Rest der Seite. */

#weg .hp-road {
  max-width: 72rem;
  margin-inline: auto;
}
#weg .k {
  font-size: .72rem !important;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #7a7368;
  font-weight: 600;
  margin-bottom: .4rem;
}

/* Kopf mit Kennzahlen */
#weg .hp-road-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.2rem 2.4rem;
  align-items: end;
  margin-bottom: 2rem;
}
#weg .hp-road-head h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem) !important;
  line-height: 1.08 !important;
  margin: 0 0 .7rem !important;
  font-weight: 650 !important;
  color: #141210 !important;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
#weg .hp-road-mark {
  white-space: nowrap;
  background: linear-gradient(90deg, rgb(91 77 255 / .3), rgb(245 158 11 / .38)) no-repeat 0 88% / 100% .34em;
  transition: background-size 1.1s cubic-bezier(.16,1,.3,1) .35s;
}
#weg.is-pre .hp-road-mark { background-size: 0% .34em; }
#weg .hp-road-head p {
  margin: 0 !important;
  max-width: 44rem;
  color: #5c564c !important;
  font-size: 1.05rem !important;
  line-height: 1.45;
  text-wrap: pretty;
}
#weg .hp-road-stats {
  display: flex;
  gap: .6rem;
  margin: 0;
}
#weg .hp-road-stats > div {
  min-width: 6.4rem;
  padding: .8rem 1rem .7rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  box-shadow: 0 10px 28px rgb(27 54 97 / .06);
  text-align: left;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease;
}
#weg .hp-road-stats > div:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgb(27 54 97 / .12);
}
#weg .hp-road-stats dd { margin: 0; }
#weg .hp-road-stats strong {
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: #1b3661;
}
#weg .hp-road-stats dt {
  order: 2;
  margin-top: .3rem;
  font-size: .78rem;
  font-weight: 500;
  color: #7a7368;
}
#weg .hp-road-stats > div { display: flex; flex-direction: column-reverse; }

/* Zeitleiste: Spur, Füllung (Prototyp navy, Releases violett bis orange), ein Strich je Release, Monate darunter */
#weg .hp-road-rail {
  position: relative;
  height: 5.6rem;
  margin: 0 .6rem 2.2rem;
}
#weg .hp-road-track {
  position: absolute;
  left: 0;
  right: 0;
  top: 2.6rem;
  height: 6px;
  border-radius: 99px;
  background: rgb(27 54 97 / .08);
  overflow: hidden;
}
#weg .hp-road-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #1b3661 0, #1b3661 var(--split, 47%), #5B4DFF calc(var(--split, 47%) + 4%), #d97706 100%);
  transform-origin: left center;
  transition: transform 1.5s cubic-bezier(.45,0,.2,1) .25s;
}
#weg.is-pre .hp-road-fill { transform: scaleX(0); }
#weg .hp-road-ticks i {
  position: absolute;
  top: calc(2.6rem - 14px);
  width: 2px;
  height: 11px;
  margin-left: -1px;
  border-radius: 2px;
  background: color-mix(in srgb, #5B4DFF calc(100% - var(--t, 0) * 100%), #d97706);
  transform-origin: bottom center;
  transition: transform .45s cubic-bezier(.34,1.56,.64,1) var(--td, 0s), opacity .3s ease var(--td, 0s);
}
#weg.is-pre .hp-road-ticks i { transform: scaleY(0); opacity: 0; }
#weg .hp-road-phase {
  position: absolute;
  top: .2rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #7a7368;
  white-space: nowrap;
}
#weg .hp-road-phase::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .4rem;
  border-radius: 2px;
  background: var(--acc);
  vertical-align: .05em;
}
#weg .hp-road-months span {
  position: absolute;
  top: 3.35rem;
  transform: translateX(-50%);
  font-size: .74rem;
  color: #8a847a;
  white-space: nowrap;
}
#weg .hp-road-months span::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -.62rem;
  width: 1px;
  height: .35rem;
  background: rgb(27 54 97 / .2);
}
/* Meilenstein-Punkte auf der Leiste, verbunden mit den Karten (Überfahren hebt beide hervor) */
#weg .hp-road-dot {
  position: absolute;
  top: calc(2.6rem + 3px);
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--acc);
  box-shadow: 0 2px 8px rgb(27 54 97 / .18);
  cursor: pointer;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease, opacity .4s ease var(--td, 0s);
}
#weg.is-pre .hp-road-dot { opacity: 0; }
#weg .hp-road-dot.is-hot,
#weg .hp-road-dot:hover,
#weg .hp-road-dot:focus-visible {
  transform: scale(1.45);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 18%, transparent), 0 4px 12px rgb(27 54 97 / .25);
  outline: none;
  z-index: 2;
}
#weg .hp-road-tip {
  position: absolute;
  top: 4.6rem;
  transform: translateX(-50%) translateY(4px);
  padding: .28rem .6rem;
  border-radius: 999px;
  font-size: .74rem;
  font-weight: 600;
  white-space: nowrap;
  color: #fff;
  background: #141210;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
  z-index: 3;
}
#weg .hp-road-tip.is-on { opacity: 1; transform: translateX(-50%); }
/* Heute: neuestes Release am Ende der Leiste, atmet ruhig */
#weg .hp-road-now {
  position: absolute;
  right: 0;
  top: calc(2.6rem + 3px);
  transform: translate(50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #d97706;
  box-shadow: 0 0 0 4px #fff, 0 4px 14px rgb(217 119 6 / .45);
  transition: opacity .4s ease 1.6s, transform .5s cubic-bezier(.34,1.56,.64,1) 1.6s;
}
#weg.is-pre .hp-road-now { opacity: 0; transform: translate(50%, -50%) scale(.3); }
#weg .hp-road-now::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgb(217 119 6 / .5);
  animation: hp-road-now 2.4s ease-out infinite;
}
@keyframes hp-road-now {
  0% { transform: scale(.7); opacity: 1; }
  100% { transform: scale(1.9); opacity: 0; }
}
#weg .hp-road-now-label {
  position: absolute;
  right: -.6rem;
  top: .2rem;
  white-space: nowrap;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #b45309;
}
#weg .hp-road-now-label { transition: opacity .5s ease 1.7s; }
#weg.is-pre .hp-road-now-label { opacity: 0; }
#weg .hp-road-months span.is-start { transform: none; }
#weg .hp-road-months span.is-start::before { left: 0; }

/* Drei Phasen mit Meilenstein-Karten */
#weg .hp-road-phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
}
#weg .hp-road-col-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: 0 .2rem .55rem;
  margin-bottom: .7rem;
  border-bottom: 2px solid color-mix(in srgb, var(--acc) 35%, transparent);
}
#weg .hp-road-col-head h3 {
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 680 !important;
  color: #141210 !important;
}
#weg .hp-road-col-head span {
  font-size: .76rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--acc) 80%, #141210);
  white-space: nowrap;
}
#weg .hp-road-col ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .7rem;
}
#weg .hp-road-card {
  --rd: 0s;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .75rem;
  padding: .9rem 1rem .95rem;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgb(27 54 97 / .1);
  box-shadow: 0 10px 28px rgb(27 54 97 / .06);
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease,
    border-color .25s ease,
    opacity .6s ease var(--rd),
    translate .8s cubic-bezier(.16,1,.3,1) var(--rd);
}
/* Lichtkegel folgt dem Zeiger (--mx/--my aus weg.js), wie bei den Preiskarten */
#weg .hp-road-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(16rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--acc) 13%, transparent), transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
}
/* Karten ruhen grau wie abgewählte Preiskarten, beim Überfahren (auch über ihren Punkt auf der Leiste) werden sie
   farbig (Nutzer 01.10.2026) */
#weg .hp-road-card { background: #fbfaf8; }
#weg .hp-road-card > * {
  filter: grayscale(1);
  opacity: .7;
  transition: filter .45s ease, opacity .45s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
}
#weg .hp-road-card.is-hot,
#weg .hp-road-card:hover { background: #fff; }
#weg .hp-road-card.is-hot > *,
#weg .hp-road-card:hover > * {
  filter: none;
  opacity: 1;
  transition-duration: .25s, .25s, .45s;
}
#weg .hp-road-card.is-hot,
#weg .hp-road-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--acc) 40%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acc) 25%, transparent), 0 20px 40px color-mix(in srgb, var(--acc) 16%, transparent);
}
#weg .hp-road-card.is-hot::before,
#weg .hp-road-card:hover::before { opacity: 1; }
#weg .hp-road-icon {
  grid-row: 1 / span 3;
  display: grid;
  place-items: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 12px;
  font-size: 1.05rem;
  color: color-mix(in srgb, var(--acc) 85%, #141210);
  background: color-mix(in srgb, var(--acc) 10%, transparent);
  transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}
#weg .hp-road-card:hover .hp-road-icon,
#weg .hp-road-card.is-hot .hp-road-icon { transform: rotate(-8deg) scale(1.08); }
#weg .hp-road-meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .1rem .5rem;
  margin-bottom: .15rem;
}
#weg .hp-road-rel {
  font-size: .78rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--acc) 85%, #141210);
}
#weg .hp-road-ver {
  font-size: .7rem;
  font-weight: 500;
  color: #8a847a;
  font-variant-numeric: tabular-nums;
}
#weg .hp-road-meta time {
  margin-left: auto;
  font-size: .72rem;
  color: #8a847a;
  white-space: nowrap;
}
#weg .hp-road-card h4 {
  margin: 0 0 .2rem !important;
  font-size: 1rem !important;
  font-weight: 680 !important;
  line-height: 1.25 !important;
  color: #141210 !important;
}
#weg .hp-road-card p {
  margin: 0 !important;
  font-size: .86rem !important;
  line-height: 1.4;
  color: #5c564c !important;
}

/* Hard Facts */
#weg .hp-road-facts {
  margin-top: 2rem;
  padding-top: 1.1rem;
  border-top: 1px dashed rgb(27 54 97 / .16);
}
#weg .hp-road-facts ul {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
}
#weg .hp-road-facts li {
  padding: .7rem .9rem .65rem;
  border-radius: 14px;
  background: #fbfaf8;
  border: 1px solid rgb(27 54 97 / .08);
  transition: transform .35s cubic-bezier(.16,1,.3,1), background-color .25s ease, border-color .25s ease;
}
#weg .hp-road-facts li:hover {
  transform: translateY(-3px);
  background: #fff;
  border-color: rgb(27 54 97 / .18);
}
#weg .hp-road-facts strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #1b3661;
  font-variant-numeric: tabular-nums;
}
#weg .hp-road-facts span {
  font-size: .78rem;
  color: #7a7368;
}

/* Einflug beim ersten Erscheinen (nur Desktop, weg.js setzt --rd je Element) */
#weg.is-pre .hp-road-head,
#weg.is-pre .hp-road-col-head,
#weg.is-pre .hp-road-card,
#weg.is-pre .hp-road-facts {
  opacity: 0;
  translate: 0 22px;
}
#weg .hp-road-head,
#weg .hp-road-col-head,
#weg .hp-road-facts {
  transition: opacity .6s ease var(--rd, 0s), translate .8s cubic-bezier(.16,1,.3,1) var(--rd, 0s);
}

@media (max-width: 1099.98px) {
  #weg .hp-road-head { grid-template-columns: minmax(0, 1fr); }
  #weg .hp-road-phases { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  #weg .hp-road-col ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  #weg.scene--board { padding-bottom: 2rem; }
  #weg .hp-road-head { margin-bottom: 1.4rem; }
  #weg .hp-road-head p { font-size: .98rem !important; }
  #weg .hp-road-stats > div { min-width: 0; flex: 1; padding: .65rem .75rem .6rem; }
  #weg .hp-road-stats strong { font-size: 1.6rem; }
  #weg .hp-road-rail { margin: 0 .5rem 1.6rem; }
  #weg .hp-road-months span { font-size: .66rem; }
  #weg .hp-road-months span[data-short] { font-size: 0; }
  #weg .hp-road-months span[data-short]::after { content: attr(data-short); font-size: .66rem; }
  #weg .hp-road-col ol { grid-template-columns: minmax(0, 1fr); }
  #weg .hp-road-facts ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #weg .hp-road-phase--releases { display: none; } /* „Heute · Release N“ braucht den Platz, die Zahl steht oben */
  #weg .hp-road-now-label { right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #weg .hp-road-card,
  #weg .hp-road-card > *,
  #weg .hp-road-fill,
  #weg .hp-road-ticks i,
  #weg .hp-road-now,
  #weg .hp-road-mark { transition-duration: .01s !important; transition-delay: 0s !important; }
  #weg .hp-road-now::after { animation: none; }
}

/* Darkmode */
html[data-bs-theme="dark"] #weg .hp-road-head h2,
html[data-bs-theme="dark"] #weg .hp-road-col-head h3,
html[data-bs-theme="dark"] #weg .hp-road-card h4 { color: #e6edf3 !important; }
html[data-bs-theme="dark"] #weg .hp-road-head p,
html[data-bs-theme="dark"] #weg .hp-road-card p { color: #9ca3af !important; }
html[data-bs-theme="dark"] #weg .k,
html[data-bs-theme="dark"] #weg .hp-road-stats dt,
html[data-bs-theme="dark"] #weg .hp-road-phase,
html[data-bs-theme="dark"] #weg .hp-road-months span,
html[data-bs-theme="dark"] #weg .hp-road-ver,
html[data-bs-theme="dark"] #weg .hp-road-meta time,
html[data-bs-theme="dark"] #weg .hp-road-facts span { color: #8b949e; }
html[data-bs-theme="dark"] #weg .hp-road-stats > div,
html[data-bs-theme="dark"] #weg .hp-road-card {
  background: #161b22;
  border-color: #30363d;
  box-shadow: none;
}
html[data-bs-theme="dark"] #weg .hp-road-card { background: #12161c; }
html[data-bs-theme="dark"] #weg .hp-road-card.is-hot,
html[data-bs-theme="dark"] #weg .hp-road-card:hover { background: #161b22; }
html[data-bs-theme="dark"] #weg .hp-road-stats strong,
html[data-bs-theme="dark"] #weg .hp-road-facts strong { color: #9db0ff; }
html[data-bs-theme="dark"] #weg .hp-road-track { background: rgb(255 255 255 / .08); }
html[data-bs-theme="dark"] #weg .hp-road-fill { background: linear-gradient(90deg, #6d86c9 0, #6d86c9 var(--split, 47%), #7B6DFF calc(var(--split, 47%) + 4%), #f59e0b 100%); }
html[data-bs-theme="dark"] #weg .hp-road-dot { background: #0d1117; border-color: color-mix(in srgb, var(--acc) 60%, #ffffff); }
html[data-bs-theme="dark"] #weg .hp-road-now { box-shadow: 0 0 0 4px #0d1117, 0 4px 14px rgb(245 158 11 / .45); background: #f59e0b; }
html[data-bs-theme="dark"] #weg .hp-road-now-label { color: #f5c66a; }
html[data-bs-theme="dark"] #weg .hp-road-tip { background: #e6edf3; color: #0d1117; }
html[data-bs-theme="dark"] #weg .hp-road-icon,
html[data-bs-theme="dark"] #weg .hp-road-rel,
html[data-bs-theme="dark"] #weg .hp-road-col-head span { color: color-mix(in srgb, var(--acc) 55%, #ffffff); }
html[data-bs-theme="dark"] #weg .hp-road-icon { background: color-mix(in srgb, var(--acc) 18%, transparent); }
html[data-bs-theme="dark"] #weg .hp-road-facts li { background: #12161c; border-color: #30363d; }
html[data-bs-theme="dark"] #weg .hp-road-facts li:hover { background: #161b22; }
html[data-bs-theme="dark"] #weg .hp-road-facts { border-top-color: #30363d; }