/* LKW-Animationen (Hero-Straße + scroll-gesteuerte Tagestour) */

/* ---- Hero: LKW fährt über die Straße ---- */
.lp-hero.has-road .wrap { padding-bottom: 150px; }
.hero-road { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; overflow: hidden; }
.hero-road::before { content: ""; position: absolute; left: 0; right: 0; bottom: 18px; height: 2px; background: linear-gradient(90deg, transparent, rgba(8,178,106,.55) 15%, rgba(8,178,106,.55) 85%, transparent); box-shadow: 0 0 14px rgba(8,178,106,.6); }
.hero-road::after { content: ""; position: absolute; left: 0; right: -80px; bottom: 9px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.28) 0 26px, transparent 26px 64px); animation: lane 1.1s linear infinite; }
@keyframes lane { to { transform: translateX(-64px); } }
.hero-truck { position: absolute; bottom: 18px; left: 0; width: 190px; height: auto; animation: drive 13s cubic-bezier(.45,.05,.55,.95) infinite; filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); }
.hero-truck .tr-body { animation: bump .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
.hero-truck .tr-wheel { animation: spin .55s linear infinite; transform-box: fill-box; transform-origin: center; }
.hero-truck .tr-puff circle { animation: puff 1.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.hero-truck .tr-puff circle:nth-child(2) { animation-delay: .45s; }
.hero-truck .tr-puff circle:nth-child(3) { animation-delay: .9s; }
@keyframes drive {
  0% { transform: translateX(-240px); }
  42% { transform: translateX(calc(50vw - 95px)); }
  54% { transform: translateX(calc(50vw - 95px)); }
  100% { transform: translateX(calc(100vw + 40px)); }
}
@keyframes bump { to { transform: translateY(-1.2px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes puff { 0% { opacity: .55; transform: translate(0,0) scale(.4); } 100% { opacity: 0; transform: translate(-26px,-14px) scale(1.6); } }
@media (max-width: 760px) {
  .lp-hero.has-road .wrap { padding-bottom: 120px; }
  .hero-road { height: 78px; }
  .hero-truck { width: 140px; }
}

/* ---- Tagestour ---- */
.tour { position: relative; height: 320vh; }
.tour-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.tour-sky { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(520px 520px at var(--sunx, 10%) var(--suny, 70%), var(--sunc, rgba(255,170,90,.55)), transparent 62%),
  linear-gradient(180deg, var(--sky1, #2a2420) 0%, var(--sky2, #141a1d) 55%, var(--ink) 100%); transition: background .2s linear; }
.tour-stars { position: absolute; inset: 0 0 45% 0; z-index: 0; opacity: var(--stars, 0); background-image:
  radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 12%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 46% 30%, #fff, transparent), radial-gradient(1px 1px at 63% 16%, #fff, transparent),
  radial-gradient(1.5px 1.5px at 78% 26%, #fff, transparent), radial-gradient(1px 1px at 90% 10%, #fff, transparent),
  radial-gradient(1px 1px at 35% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 70% 42%, #fff, transparent); animation: twinkle 3s ease-in-out infinite alternate; }
@keyframes twinkle { to { filter: brightness(.5); } }
.tour-moon { position: absolute; right: 12%; top: 12%; width: 54px; height: 54px; border-radius: 50%; box-shadow: inset -14px -6px 0 0 #f4f1e3; opacity: var(--stars, 0); transform: rotate(-20deg); z-index: 0; filter: drop-shadow(0 0 18px rgba(244,241,227,.5)); }
.tour-head { position: relative; z-index: 2; padding-top: clamp(84px, 12vh, 120px); }
.tour-head h2 { font-size: clamp(38px, 5.4vw, 76px); margin-top: 12px; }
.tour-head p { margin-top: 12px; color: rgba(255,255,255,.7); max-width: 520px; }
.tour-clock { position: absolute; z-index: 3; right: max(20px, calc((100vw - 1200px) / 2)); top: clamp(90px, 13vh, 128px); display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: rgba(16,20,23,.6); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(10px); font-weight: 700; font-size: 15px; }
.tour-clock svg { width: 20px; height: 20px; color: var(--green-hi); }
.tour-stage { position: relative; z-index: 1; flex: 1; min-height: 0; }
.tour-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.tour-road-bg { fill: none; stroke: #2b3338; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.tour-road-edge { fill: none; stroke: rgba(255,255,255,.08); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.tour-road-lane { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-dasharray: 12 14; }
.tour-road-done { fill: none; stroke: var(--green-hi); stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(8,178,106,.9)); }
.tour-stop { position: absolute; z-index: 2; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; text-align: center; width: 230px; pointer-events: none; }
.tour-stop .pin { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #1d2428; border: 2px solid rgba(255,255,255,.18); color: rgba(255,255,255,.6); transition: all .5s cubic-bezier(.3,1.6,.5,1); margin-bottom: 10px; }
.tour-stop .pin svg { width: 22px; height: 22px; }
.tour-stop .lbl { padding: 12px 14px; border-radius: 14px; background: rgba(16,20,23,.78); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(10px); opacity: .35; transform: translateY(8px) scale(.96); transition: opacity .5s, transform .5s cubic-bezier(.2,.8,.2,1); order: -1; margin-bottom: 10px; }
.tour-stop .lbl b { display: block; font-family: var(--head); font-size: 22px; text-transform: uppercase; letter-spacing: .01em; }
.tour-stop .lbl span { display: block; margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.72); line-height: 1.4; }
.tour-stop.on .pin { background: var(--green); border-color: var(--green-hi); color: #fff; transform: scale(1.12); box-shadow: 0 0 0 8px rgba(8,178,106,.18), 0 0 30px rgba(8,178,106,.6); }
.tour-stop.on .lbl { opacity: 1; transform: none; }
.tour-stop.below { transform: translate(-50%, 0); }
.tour-stop.below .lbl { order: 1; margin: 10px 0 0; }
.tour-stop.below .pin { margin: 0; }
.tour-truck { will-change: transform; }
.tour-beam { opacity: var(--beam, 0); transition: opacity .3s; }
.tour-progress { position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%); width: min(320px, 70vw); height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.tour-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--green), var(--green-hi)); }
.tour-hint { position: absolute; z-index: 3; left: 50%; bottom: 38px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .06em; text-transform: uppercase; transition: opacity .4s; }
.tour-cap { display: none; }
@media (max-width: 760px) {
  .tour { height: 340vh; }
  .tour-head { padding-top: 84px; }
  .tour-head h2 { font-size: 36px; }
  .tour-head p { display: none; }
  .tour-clock { display: none !important; }
  .tour-stop .lbl { display: none; }
  .tour-stop .pin { margin: 0; }
  .tour-stop { transform: translate(-50%, -50%) !important; width: auto; }
  .tour-stage { margin-bottom: 196px; }
  .tour-cap { display: block; position: absolute; z-index: 3; left: 16px; right: 16px; bottom: 104px; padding: 16px 18px; border-radius: 18px; background: rgba(16,20,23,.82); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); }
  .tour-cap small { display: block; font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--green-hi); }
  .tour-cap [data-caption] b { display: block; margin-top: 6px; font-family: var(--head); font-size: 24px; text-transform: uppercase; }
  .tour-cap [data-caption] span { display: block; margin-top: 4px; font-size: 14.5px; color: rgba(255,255,255,.75); }
  .tour-cap [data-caption].pop { animation: capin .45s cubic-bezier(.2,.8,.2,1); }
  @keyframes capin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .tour-clock { left: 16px; right: auto; top: auto; bottom: 56px; }
  .tour-stop { width: 170px; }
  .tour-stop .lbl { padding: 9px 11px; }
  .tour-stop .lbl b { font-size: 18px; }
  .tour-stop .lbl span { font-size: 12.5px; }
  .tour-stop .pin { width: 38px; height: 38px; }
  .tour-hint { display: none; }
  .tour-progress { left: 34px; right: 34px; transform: none; width: auto; bottom: 112px; height: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-truck { animation: none; transform: translateX(calc(50vw - 95px)); }
  .hero-truck .tr-wheel, .hero-truck .tr-body, .hero-truck .tr-puff circle, .hero-road::after, .tour-stars { animation: none; }
}