/* Einstieg „Live-Brücke": Brückenfeld im Hauptschild, Prüfplakette mit Stempel, Lichtkante */

/* ---------- Tasten wandern unter die Unterzeile ---------- */
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; margin-top: clamp(1.5rem, 1rem + 1.2vw, 2.25rem); }

/* ---------- Brückenfeld (nimmt die frühere Tastenzeile ein, neben der Plakette) ---------- */
.hero .f--route {
  grid-column: 1 / 9;
  border-right: 1px solid var(--line); border-bottom: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 0 clamp(0.75rem, 0.25rem + 1.5vw, 2rem);
  padding: clamp(1rem, 0.8rem + 0.8vw, 1.5rem) clamp(1.25rem, 0.8rem + 2vw, 3rem);
}
.route__end { display: grid; gap: 0.35rem; }
.route__end .m-only { display: none; }
.route__end--ca { text-align: right; justify-items: end; }
.route__time {
  font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.4rem); font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; font-feature-settings: "tnum" 1; color: var(--cream);
}
.route__end--de .route__time { color: var(--gold); }
.route__colon { display: inline-block; margin-inline: 0.02em; }
.route__meta { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; color: #B9C3D3; font-feature-settings: "tnum" 1; }
.route__meta svg { width: 16px; height: 16px; flex: none; }
.route__meta .i-moon { display: none; }
.route__end.is-night .i-sun { display: none; }
.route__end.is-night .i-moon { display: block; }

.route__mid { display: grid; gap: 0.5rem; justify-items: center; align-self: stretch; align-content: end; }
.route__arc { width: 100%; max-width: 520px; height: auto; display: block; overflow: visible; }
.route__gap { text-align: center; }
.route__gap b { color: var(--cream); font-weight: 700; }

.route__base { stroke: var(--line); stroke-width: 1.5; }
.route__tick { stroke: var(--line); stroke-width: 1.5; }
.route__ghost { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; }
.route__path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.route__hanger { stroke: rgb(195 206 222 / 0.32); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 100%; }
.route__node { transform-box: fill-box; transform-origin: center; }
.route__node--de { fill: var(--gold); }
.route__node--ca { fill: var(--cream); }
.route__halo { fill: none; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; opacity: 0; }
.route__halo--de { stroke: var(--gold); }
.route__halo--ca { stroke: var(--cream); }
.route__pulse { opacity: 0; }
.route__pulse--de { fill: var(--gold); }
.route__pulse--ca { fill: var(--cream); }
.route__glow { opacity: 0; }
.route__glow--de { fill: rgb(217 162 27 / 0.28); }
.route__glow--ca { fill: rgb(244 239 230 / 0.22); }

/* Auftritt der Brücke */
.js .route__path { stroke-dashoffset: 1; }
.js .route__hanger { transform: scaleY(0); }
.js .f--route.is-live .route__path { stroke-dashoffset: 0; transition: stroke-dashoffset 1300ms var(--ease-out) 150ms; }
.js .f--route.is-live .route__hanger { transform: scaleY(1); transition: transform 520ms var(--ease-out); transition-delay: calc(500ms + var(--i) * 55ms); }
.f--route.is-live .route__halo { animation: halo 2.8s var(--ease-out) infinite; }
.f--route.is-live .route__halo--ca { animation-delay: 1.4s; }
.f--route.is-live .route__colon { animation: tick 2s steps(1, end) infinite; }
@keyframes halo { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(3.2); } }
@keyframes tick { 50% { opacity: 0.25; } }

/* ---------- Prüfplakette: Stempel ---------- */
.seal__ring { transform-box: view-box; transform-origin: 120px 120px; }
.seal.is-stamped .seal__ring { animation: ring 60s linear infinite; }
@keyframes ring { to { transform: rotate(360deg); } }

.js .seal { opacity: 0; transform: rotate(-26deg) scale(1.9); }
.js .seal.is-stamped { animation: stamp 620ms cubic-bezier(0.5, 0, 0.75, 0) both; }
@keyframes stamp {
  0%   { opacity: 0; transform: rotate(-26deg) scale(1.9); filter: drop-shadow(0 50px 40px rgb(0 0 0 / 0.25)); }
  55%  { opacity: 1; transform: rotate(-6deg) scale(0.94); filter: drop-shadow(0 6px 8px rgb(0 0 0 / 0.55)); animation-timing-function: var(--ease-out); }
  75%  { transform: rotate(-9deg) scale(1.03); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.45)); }
}
.seal__burst {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--gold); opacity: 0; pointer-events: none;
}
.seal.is-stamped .seal__burst { animation: burst 700ms var(--ease-out) 340ms both; }
@keyframes burst { 0% { opacity: 0.8; transform: scale(0.9); } 100% { opacity: 0; transform: scale(1.6); } }

.hero__plate.is-hit { animation: hit 240ms ease-out; }
@keyframes hit { 30% { transform: translateY(2px); } 60% { transform: translateY(-1px); } }

/* ---------- Lichtkante über dem eloxierten Schild ---------- */
.plate__sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
.plate__sheen::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%;
  background: linear-gradient(100deg, transparent 0%, rgb(195 206 222 / 0.07) 40%, rgb(255 255 255 / 0.13) 50%, rgb(195 206 222 / 0.07) 60%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg); opacity: 0;
}
.plate__sheen.is-on::after { animation: sheen 1600ms var(--ease-out) both; }
@keyframes sheen { 0% { opacity: 1; transform: translateX(-120%) skewX(-12deg); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(420%) skewX(-12deg); } }
.hero__plate .plate__grid { position: relative; z-index: 2; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 960px) {
  .hero .f--route { order: 2; grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .hero__cta .btn { width: 100%; justify-content: center; }
  .hero .f--route { order: 3; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; }
  .route__mid { grid-column: 1 / -1; grid-row: 1; margin-bottom: 0.5rem; }
  .route__end { min-width: 0; }
  .route__end .m-only { display: inline; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .route__path { stroke-dashoffset: 0; transition: none !important; }
  .js .route__hanger { transform: none; transition: none !important; }
  .f--route.is-live .route__halo, .f--route.is-live .route__colon { animation: none; }
  .js .seal, .js .seal.is-stamped { opacity: 1; transform: rotate(-8deg); animation: none; }
  .seal.is-stamped .seal__ring, .seal.is-stamped .seal__burst, .hero__plate.is-hit, .plate__sheen.is-on::after { animation: none; }
}