/* ---------------------------------------------------------------------------
   The landing page is the motto: "Der Motor hinter Ihrem DSP."

   The words state it on the left; the vehicle proves it on the right, with the
   four areas working inside it and every cable running into the IBSS desk. The
   render is cropped to the van at x 29.5% — the artwork paints an English
   headline in that left third, and this page says it in real DE/EN type instead.

   Two columns, no gutter on the left: the van runs off that edge of the screen,
   so there is no dead space beside it at any width. The words sit top right.
   --------------------------------------------------------------------------- */

.hero.image-depth-hero{
  position:relative;
  height:100svh; min-height:640px; max-height:1100px;
  padding:0; overflow:hidden;
  display:flex; align-items:center;
  /* Outside the aligned plate the same scene runs blurred, so the page keeps the
     light and the colour without a second sharp guardrail cutting across at a
     different scale. */
  background-color:#0B1119;
  background-image:
    linear-gradient(to top, rgba(8,13,20,0.88) 0%, rgba(11,17,25,0.4) 15%, transparent 38%),
    url("engine-ambient.webp");
  background-size:auto, cover;
  background-position:center, center 46%;
  background-repeat:no-repeat;
}
/* The decorative gauge belongs to the old hero and would sit behind the van. */
.image-depth-hero .hero-3d{display:none;}

.image-depth-hero .hero-grid{
  display:grid;
  grid-template-columns:1fr minmax(280px, 29%);
  align-items:center;
  gap:clamp(24px, 3vw, 52px);
  width:100%; max-width:none;
  margin:0; padding:60px clamp(20px, 4vw, 72px) 16px 0;
}

/* ---- the motto ------------------------------------------------------------ */

/* The words are a card, not loose type on the picture: a framed panel that drops
   in and settles, holding the headline, the line under it and both buttons. */
.image-depth-hero .hero-grid>div:first-child{
  position:relative; z-index:3; grid-column:2; grid-row:1; align-self:center;
  width:auto; max-width:none; margin:0; text-align:left;
  padding:clamp(20px, 1.9vw, 30px);
  border:1px solid rgba(255,255,255,0.10); border-radius:14px;
  background:linear-gradient(160deg, rgba(18,28,40,0.62), rgba(10,16,24,0.54));
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  box-shadow:0 24px 60px rgba(0,0,0,0.38), inset 0 1px rgba(255,255,255,0.05);
  animation:ibss-card-drop 900ms cubic-bezier(.2,.9,.25,1) 620ms both;
}
/* The amber edge ties it to the light running through the vehicle. */
.image-depth-hero .hero-grid>div:first-child::before{
  content:""; position:absolute; left:clamp(24px,2.4vw,38px); top:-1px;
  width:64px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--amber), rgba(255,153,0,0));
}
@keyframes ibss-card-drop{
  0%   {opacity:0; transform:translate3d(0,-64px,0) scale(.982);}
  62%  {opacity:1; transform:translate3d(0,7px,0) scale(1);}
  82%  {transform:translate3d(0,-3px,0);}
  100% {opacity:1; transform:translate3d(0,0,0);}
}
.image-depth-hero .eyebrow{font-size:11px; letter-spacing:.14em; margin-bottom:14px;}
.image-depth-hero h1{
  font-size:clamp(34px, 3.4vw, 58px); line-height:1.02;
  margin-bottom:18px; text-shadow:none; text-wrap:balance;
}
.image-depth-hero p.lead{
  font-size:14px; line-height:1.6; color:#BAC4CE;
  max-width:42ch; margin:0 0 26px; text-shadow:none;
}
.image-depth-hero .hero-ctas{gap:12px; margin-bottom:0; justify-content:flex-start;}
.image-depth-hero .hero-tagline{display:none;}

/* ---- the proof ------------------------------------------------------------ */

/* Pulled left over the gap so the vehicle's feathered edge crosses the copy
   column: the words read as a background plane, the van as the foreground one. */
.image-depth-hero .dsp-engine{
  /* A perspective other than none makes this a containing block, which pinned
     the menu to the vehicle column instead of the page. */
  position:static; perspective:none; z-index:2; min-width:0; grid-column:1; grid-row:1;
  /* Only as far as the mask feathers, so the overlap is all soft edge and the
     vehicle's solid body never reaches the words. */
  margin-right:0;
  width:auto; max-width:none;
  border:0; border-radius:0; background:none; box-shadow:none;
}

/* The frame's box is the vehicle layer's box, so a plate painted at 100% 100%
   here lands pixel on pixel with the van: the guardrail, the road edge and the
   horizon are the same ones the vehicle was photographed against. Scaling the
   scene separately from the vehicle is what made them disagree. */
/* The frame's box is the vehicle layer's box, so a plate painted at 100% 100%
   here lands pixel on pixel with the van: the guardrail, the road edge and the
   horizon are the same ones the vehicle was photographed against. */
.image-depth-hero .engine-frame{
  position:relative; width:100%;
  border:0; border-radius:0; box-shadow:none;
  background:url("engine-backdrop.webp") center/100% 100% no-repeat;
  overflow:visible; aspect-ratio:auto;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 11%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* The clean cut-out carries no shadow of its own, so the vehicle would hang in
   the air. This is its contact patch, and it sits on the travelling layer because
   a shadow belongs to the vehicle, not to the road it is crossing. */
.image-depth-hero .engine-layer{z-index:1;}

/* A soft ambient darkening under the vehicle, on top of its own reflection. */
.image-depth-hero .engine-layer::after{
  content:""; position:absolute; z-index:-1; pointer-events:none;
  left:8%; right:6%; top:75%; height:19%;
  background:
    /* the tight dark core where the tyres meet the road */
    radial-gradient(38% 26% at 17% 74%, rgba(3,6,10,0.78), transparent 72%),
    radial-gradient(38% 26% at 84% 74%, rgba(3,6,10,0.78), transparent 72%),
    /* and the broad soft one the whole body casts */
    radial-gradient(52% 46% at 50% 62%, rgba(4,8,13,0.58), rgba(4,8,13,0.2) 55%, transparent 78%);
  filter:blur(9px);
}
/* The new artwork has no painted headline and its own extended scene, so the
   layer shows it whole — no crop, no offset. */
.image-depth-hero .engine-layer{
  position:relative; top:auto; left:auto;
  width:100%; margin:0; transform:none;
}
.image-depth-hero .engine-layer img{
  display:block; width:100%; height:auto;
  filter:url(#ibss-motion);
}
.image-depth-hero .engine-layer.is-parked img{filter:none;}


/* ---- the four areas, as symbols on the vehicle ---------------------------- */

/* The boxes sit on the partitions of the office inside the body, so the frame a
   visitor sees is the wall the artwork already draws. */
.image-depth-hero .engine-zone{
  border:1px solid transparent; border-radius:2px;
  transition:border-color 240ms cubic-bezier(.2,.9,.25,1),
             box-shadow 240ms cubic-bezier(.2,.9,.25,1);
}
/* Every bay carries its own shade. Pointing at one darkens the other three, so
   the chosen module is the only lit part of the vehicle — the picture does the
   highlighting, not a badge stuck on top of it. */
.image-depth-hero .engine-zone::after{
  content:""; position:absolute; inset:-1px; border-radius:inherit;
  /* The inline block still carries width/height from the old marker dot, and a
     fixed width beats inset — without this the shade was an 11px square. */
  width:auto; height:auto;
  background:rgba(7,12,18,0); pointer-events:none;
  transition:background-color 260ms cubic-bezier(.2,.9,.25,1);
}
.image-depth-hero .engine-layer:has(.engine-zone:hover) .engine-zone:not(:hover)::after,
.image-depth-hero .engine-layer:has(.engine-zone:focus-visible) .engine-zone:not(:focus-visible)::after,
/* and it stays isolated after the click, so the chosen module is still obvious
   while the visitor reads about it below */
.image-depth-hero .engine-layer:has(.engine-zone.is-open) .engine-zone:not(.is-open)::after{
  background:rgba(7,12,18,0.62);
}
/* The shelf line at the top of each bay and the floor at the bottom: two rules
   that run with the furniture rather than boxing it in. */
.image-depth-hero .engine-zone::before{
  content:""; position:absolute; left:6%; right:6%; top:0; bottom:0;
  width:auto; height:auto; border-radius:0; background:none; transform:none;
  border-top:2px solid rgba(255,183,82,0); border-bottom:2px solid rgba(255,183,82,0);
  pointer-events:none;
  transition:border-color 240ms cubic-bezier(.2,.9,.25,1);
}
.image-depth-hero .engine-zone:hover::before,
.image-depth-hero .engine-zone:focus-visible::before,
.image-depth-hero .engine-zone.is-open::before{
  border-top-color:rgba(255,183,82,0.95); border-bottom-color:rgba(255,183,82,0.55);
}
/* Above the bay, in the dark roof band: on the painted sign it printed the name
   twice, which read as a mistake rather than a control. */
/* The artwork prints these on the bays. A second set doubled every name. */
.image-depth-hero .engine-zone-label{display:none;}
.image-depth-hero .engine-zone-label--unused{
  top:-30px; bottom:auto;
  padding:6px 9px; border:1px solid rgba(255,183,82,0.42); border-radius:3px;
  background:rgba(13,22,32,0.84); backdrop-filter:blur(8px); box-shadow:none;
  font:500 10px 'Inter',sans-serif; letter-spacing:.07em;
}
.image-depth-hero .engine-zone:hover,
.image-depth-hero .engine-zone:focus-visible,
.image-depth-hero .engine-zone.is-open{
  border-color:rgba(255,183,82,0.75);
  box-shadow:0 0 34px rgba(255,153,0,0.30), inset 0 0 44px rgba(255,153,0,0.18);
}

/* ---- what the symbol says ------------------------------------------------- */

/* The four areas as a standing menu in the box to the right of the vehicle:
   they arrive one after another, and hovering a bay on the van lights the same
   row here. Row height and gap are fixed so the caption below can be anchored
   to a known offset without measuring anything at runtime. */
.image-depth-hero .engine-menu{
  position:static; width:auto;
  margin:8px 0 0 clamp(20px,4vw,72px);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
}
/* These were four square-cornered boxes in a row while every other surface on the
   page is rounded — a table, not a control. One radius system: buttons 6, these 8,
   the card 14. The number becomes a real mono tag, the arrow says it opens
   something, and an amber rail lights down the left edge on approach. */
.image-depth-hero .engine-menu-button{
  position:relative; display:flex; align-items:center; gap:12px;
  min-height:52px; height:auto; padding:0 16px;
  border:1px solid rgba(255,255,255,0.14); border-radius:8px;
  background:linear-gradient(180deg, rgba(22,33,46,0.66), rgba(11,18,27,0.55));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  color:#E4E8ED; font:500 13.5px 'Inter',sans-serif; text-decoration:none;
  box-shadow:inset 0 0 0 0 var(--amber);
  transition:border-color 220ms cubic-bezier(.2,.9,.25,1),
             color 220ms cubic-bezier(.2,.9,.25,1),
             box-shadow 260ms cubic-bezier(.2,.9,.25,1),
             transform 180ms cubic-bezier(.2,.9,.25,1);
}
.image-depth-hero .engine-menu-button::before{
  counter-increment:module; content:'0' counter(module);
  font:600 10px 'Roboto Mono', ui-monospace, monospace; letter-spacing:.1em;
  color:#FFB752; opacity:.9;
}
.image-depth-hero .engine-menu-button::after{
  content:'›'; display:block; margin-left:auto;
  font-size:18px; line-height:1; color:#FFB752;
  transform:translateX(-5px); opacity:0;
  transition:transform 220ms cubic-bezier(.2,.9,.25,1), opacity 220ms;
}
.image-depth-hero .engine-menu-button:hover,
.image-depth-hero .engine-menu-button:focus-visible,
.image-depth-hero .engine-menu-button.is-open{
  border-color:rgba(255,183,82,0.55); color:#fff;
  transform:translateY(-2px);
  box-shadow:inset 2px 0 0 0 var(--amber);
}
.image-depth-hero .engine-menu-button:hover::after,
.image-depth-hero .engine-menu-button:focus-visible::after,
.image-depth-hero .engine-menu-button.is-open::after{transform:translateX(0); opacity:1;}
/* Pressing it should feel like a press. */
.image-depth-hero .engine-menu-button:active{transform:translateY(0) scale(0.99);}
.image-depth-hero .hero-ctas .btn:active{transform:translateY(1px);}

/* Anchored under the menu: 4 rows of 46px plus 3 gaps of 8px plus 18px. */
.image-depth-hero .engine-caption{
  position:static; width:auto; max-width:74ch;
  margin:10px 0 0 clamp(20px,4vw,72px); padding:0; border:0; background:none;
  min-height:40px; justify-content:flex-start; text-align:left;
}
.image-depth-hero .engine-caption p{font-size:13px; line-height:1.6; color:#BAC4CE; max-width:none;}
/* engine.js adds .is-swapped on every change so the new line animates in. */
.image-depth-hero .engine-caption.is-swapped p{
  animation:ibss-caption-swap 380ms cubic-bezier(.2,.9,.25,1) both;
}
@keyframes ibss-caption-swap{
  from{opacity:0; transform:translate3d(0,8px,0);}
  to  {opacity:1; transform:none;}
}

/* ---- the arrival ----------------------------------------------------------
   The van drives in from the left and brakes into place: one transform on the
   layer, so the picture, the light animation and the four hit areas all travel
   together and land exactly where the coordinates expect them.
   --------------------------------------------------------------------------- */

/* Purely horizontal. Any vertical movement at all read as the van dropping in
   rather than driving in, so the weight transfer is carried by a small overshoot
   and roll-back instead — the way a vehicle settles after braking. */
@keyframes ibss-van-arrive{
  0%   {transform:translate3d(-132%,0,0);}
  72%  {transform:translate3d(2.2%,0,0); animation-timing-function:cubic-bezier(.36,0,.2,1);}
  88%  {transform:translate3d(-0.9%,0,0);}
  100% {transform:translate3d(0,0,0);}
}
@keyframes ibss-copy-in{
  from{opacity:0; transform:translate3d(0,14px,0);}
  to  {opacity:1; transform:none;}
}
@keyframes ibss-fade-in{from{opacity:0;} to{opacity:1;}}

.image-depth-hero .engine-layer{
  animation:ibss-van-arrive 1850ms cubic-bezier(.12,.78,.22,1) both;
}
/* The labels belong to the parked vehicle, not to the one still moving. */
.image-depth-hero .engine-zone-label{animation:ibss-fade-in 420ms 1180ms both;}
.image-depth-hero .engine-caption,
.image-depth-hero .energy-toggle{animation:ibss-copy-in 560ms cubic-bezier(.2,.9,.25,1) 1460ms both;}
.image-depth-hero .engine-menu-button{animation:ibss-copy-in 520ms cubic-bezier(.2,.9,.25,1) both;}
.image-depth-hero .engine-menu-button:nth-child(1){animation-delay:1180ms;}
.image-depth-hero .engine-menu-button:nth-child(2){animation-delay:1270ms;}
.image-depth-hero .engine-menu-button:nth-child(3){animation-delay:1360ms;}
.image-depth-hero .engine-menu-button:nth-child(4){animation-delay:1450ms;}

/* A driver who asked for less motion gets the parked vehicle, immediately. */
@media(prefers-reduced-motion:reduce){
  .image-depth-hero .engine-layer img{filter:none;}
  .image-depth-hero .engine-layer,
  .image-depth-hero .hero-grid>div:first-child,
  .image-depth-hero .engine-zone-label,
  .image-depth-hero .engine-caption,
  .image-depth-hero .engine-menu-button,
  .image-depth-hero .engine-caption.is-swapped p,
  .image-depth-hero .energy-toggle{animation:none;}
}

/* energy.js pins its pause control to the left of #dsp-engine, which in this
   layout is the vehicle column — it landed on top of the caption. Right-aligned
   on the caption row, and given a backdrop so it reads over sky or road. */
.image-depth-hero .energy-toggle{
  left:clamp(20px,4vw,72px); right:auto; top:86px; bottom:auto;
  padding:6px 10px; border:1px solid rgba(255,255,255,0.18); border-radius:3px;
  background:rgba(13,22,32,0.82); backdrop-filter:blur(8px); color:#C3CCD5;
}
.image-depth-hero .energy-toggle:hover{color:#FFBC64; border-color:#FFBC64;}

/* Short windows: the vehicle keeps the room, the prose gives it up. */
@media(max-height:780px){
  .image-depth-hero p.lead{font-size:14px; margin-bottom:20px; max-width:42ch;}
  .image-depth-hero h1{font-size:clamp(30px,2.9vw,44px);}
  .image-depth-hero .hero-grid{padding-top:52px;}
}

/* ---- under 900px the columns stack ---------------------------------------- */
@media(max-width:900px){
  .hero.image-depth-hero{height:auto; min-height:0; max-height:none; display:block; padding:104px 0 48px;}
  .image-depth-hero .hero-grid{
    display:block; padding:0; gap:0;
  }
  .image-depth-hero .hero-grid>div:first-child{grid-column:auto; grid-row:auto; padding:0 20px; margin-bottom:26px;}
  .image-depth-hero .dsp-engine{margin-right:0; width:100%; grid-column:auto; grid-row:auto;}
  .image-depth-hero h1{font-size:clamp(34px,8.4vw,48px);}
  .image-depth-hero p.lead{max-width:60ch;}

  .image-depth-hero .engine-caption{position:static; width:auto; padding:0 20px; margin:18px 0 0; min-height:56px;}
  .image-depth-hero .engine-menu{
    position:static; width:auto; top:auto; right:auto;
    margin:12px 20px 0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px;
  }
  .image-depth-hero .engine-menu-button{transform:none;}
  .image-depth-hero .engine-menu-button{min-height:48px; font-size:13px;}
  /* Smaller than a fingertip at this size; the grid below is the real control. */
  .image-depth-hero .engine-zone-label{display:none;}
  .image-depth-hero .energy-toggle{left:auto; right:20px; top:12px; bottom:auto;}
  .image-depth-hero .dsp-engine{position:relative;}
}

@media(prefers-reduced-motion:reduce){
  .image-depth-hero .engine-menu-button{transition:none;}
}