/* Tiefe: CSS-3D-Illustration (Kofferwagen) und Parallax. Nur transform und opacity, ohne Scroll-Listener.
   Ohne Unterstützung für animation-timeline bleibt alles statisch. Bei prefers-reduced-motion deaktiviert public.css alle Animationen. */

/* ---- 3D-Illustration ---- */
.truck3d { font-size: 11px; text-align: center; }
.truck3d-scene { position: relative; height: 21em; perspective: 95em; perspective-origin: 50% 35%; }
.truck3d-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(calc(var(--py, 0) * -7deg)) rotateY(calc(var(--px, 0) * 11deg)); transition: transform .6s var(--ease); }
.truck3d-body { position: absolute; left: 50%; top: 52%; width: 0; height: 0; transform-style: preserve-3d; transform: rotateX(-14deg) rotateY(-34deg); }
.truck3d-cap { margin-top: 4px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-300); line-height: 1.4; }
.cub { position: absolute; width: var(--l); height: var(--h); transform-style: preserve-3d; }
.fc { position: absolute; display: block; backface-visibility: hidden; }
.fz, .bz { left: 0; top: 0; width: var(--l); height: var(--h); }
.fz { transform: translateZ(calc(var(--d) / 2)); }
.bz { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.fx, .bx { width: var(--d); height: var(--h); left: calc((var(--l) - var(--d)) / 2); top: 0; }
.fx { transform: rotateY(90deg) translateZ(calc(var(--l) / 2)); }
.bx { transform: rotateY(-90deg) translateZ(calc(var(--l) / 2)); }
.ft, .fb { width: var(--l); height: var(--d); left: 0; top: calc((var(--h) - var(--d)) / 2); }
.ft { transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.fb { transform: rotateX(-90deg) translateZ(calc(var(--h) / 2)); }

.cargo { --l: 20em; --h: 11em; --d: 7.6em; left: -14em; top: -8em; }
.cargo .fz, .cargo .bz { background: linear-gradient(0deg, #99241F 0 .9em, #E8554D .9em 1.1em, transparent 1.1em), linear-gradient(180deg, #3A6A8B, #2B5876); }
.cargo .fx { background: #1D415A; }
.cargo .bx { background: linear-gradient(90deg, transparent calc(50% - .06em), rgb(0 0 0 / .4) 0 calc(50% + .06em), transparent 0), #16354A; }
.cargo .ft { background: #4A7A9C; }
.cargo .fb { background: #0B1C28; }

.cab { --l: 7.5em; --h: 8.2em; --d: 7.2em; left: 6.4em; top: -5.2em; }
.cab .fz, .cab .bz { background: linear-gradient(0deg, #7E1D19 0 .9em, transparent .9em), #99241F; }
.cab .fx { background: #7E1D19; }
.cab .bx { background: #6B1814; }
.cab .ft { background: #B22F29; }
.cab .fb { background: #0B1C28; }
.cab .win { position: absolute; display: block; right: .6em; top: 1.1em; width: 4.2em; height: 2.9em; background: linear-gradient(180deg, #CBDBE6, #9DB3C4); clip-path: polygon(0 0, 100% 0, 100% 100%, 12% 100%); }
.cab .bz .win { right: auto; left: .6em; transform: scaleX(-1); }
.cab .fx::before { content: ""; position: absolute; left: .7em; right: .7em; top: 1.1em; height: 2.9em; background: linear-gradient(180deg, #CBDBE6, #9DB3C4); border-radius: .3em; }
.cab .fx::after { content: ""; position: absolute; left: .6em; right: .6em; bottom: 1em; height: .7em; background: linear-gradient(90deg, #F4E3A3 0 1em, transparent 1em calc(100% - 1em), #F4E3A3 0); }

.chassis { --l: 27.5em; --h: 1.4em; --d: 5em; left: -14em; top: 3em; }
.chassis .fc { background: #0B1C28; }

.wheel { position: absolute; width: 4.4em; height: 4.4em; top: 2.4em; border-radius: 50%; backface-visibility: hidden; background: radial-gradient(circle, #9DB3C4 0 .8em, #3A4A57 .85em 1.4em, #0B1C28 1.45em); }
.w1 { left: -10.2em; }
.w2 { left: 6.4em; }
.s1 { transform: translateZ(3.9em); }
.s2 { transform: translateZ(-3.9em) rotateY(180deg); }
.ground { position: absolute; left: -16em; top: 1.8em; width: 32em; height: 10em; transform: rotateX(90deg); background: radial-gradient(closest-side, rgb(0 0 0 / .5), transparent); }

/* Hero-Truck und Akzent auf Klassenseiten: erst ab Tablet-Breite */
.hero-truck, .accent-truck { display: none; }
.hero-depth { display: none; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; gap: 32px; }
  .hero-truck { display: block; font-size: clamp(10px, 1.05vw, 14.5px); }
  .hero-scene .scene-truck { display: none; }
  .hero-depth { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
  .hero-depth i { position: absolute; top: -15%; height: 130%; transform: skewX(-24deg); }
  .hero-depth i:nth-child(1) { right: 7%; width: 14vw; background: linear-gradient(180deg, rgb(232 85 77 / 0), rgb(232 85 77 / .14)); }
  .hero-depth i:nth-child(2) { right: 27%; width: 2.6vw; background: rgb(157 179 196 / .08); }
  .has-truck { position: relative; }
  .has-truck > :not(.truck3d) { max-width: min(62%, 640px); }
  .accent-truck { display: block; position: absolute; right: clamp(20px, 4vw, 56px); top: 50%; margin-top: -11.5em; font-size: clamp(8px, .95vw, 11px); width: 30em; }
}

/* ---- Parallax: nur transform, nur mit Unterstützung, nicht bei wenig Leistung, nicht auf kleinen Bildschirmen ---- */
@keyframes px-media { to { transform: translate3d(0, 12%, 0); } }
@keyframes px-content { to { transform: translate3d(0, 5vh, 0); } }
@keyframes px-truck { to { transform: translate3d(0, -9vh, 0); } }
@keyframes px-bar-a { to { transform: translate3d(0, -11vh, 0) skewX(-24deg); } }
@keyframes px-bar-b { to { transform: translate3d(0, 6vh, 0) skewX(-24deg); } }
@keyframes truck-yaw { from { transform: rotateX(-14deg) rotateY(-34deg); } to { transform: rotateX(-14deg) rotateY(-10deg); } }
@keyframes px-drift { to { transform: translate3d(0, -12%, 0); } }

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    html:not(.lp) .hero-media { inset: -14% 0 0 0; will-change: transform; animation: px-media linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    html:not(.lp) .hero-content { animation: px-content linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    html:not(.lp) .hero-truck { animation: px-truck linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    html:not(.lp) .hero-depth i:nth-child(1) { animation: px-bar-a linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    html:not(.lp) .hero-depth i:nth-child(2) { animation: px-bar-b linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    html:not(.lp) .truck3d-body { animation: truck-yaw linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    html:not(.lp) .accent-truck .truck3d-scene { animation: px-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .truck3d-tilt { transition: none; transform: none; }
}