/* ---------------------------------------------------------------------------
   Hero stage — the IBSS render with the four bays of the van as targets.

   Bay and dot positions are percentages of the 1672x941 render and belong to
   that exact file: replacing the image means measuring them again.
   --------------------------------------------------------------------------- */

.dsp-engine{
  position:relative; z-index:1;
  margin-bottom:22px;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:14px;
  overflow:hidden;
  background:var(--slate);
  box-shadow:0 18px 50px rgba(0,0,0,0.35);
}

/* The window the render is cropped to. Compact on purpose: the full 16:9 frame
   is mostly empty sky and road, and it pushed the hero copy off the screen. */
.engine-frame{position:relative; width:100%; aspect-ratio:3/2; overflow:hidden;}

/* Picture and targets share one transformed layer, so the crop moves both
   together and the percentages below stay true at every width. The offset cuts
   the left 29.5% of the frame, which is where the headline is painted into the
   render — the page already has that headline as real text, and showing the tail
   of the painted one next to it read as a mistake. */
.engine-layer{
  position:absolute; top:50%; left:50%; width:100%;
  transform:translate(-70.5%, -50%) scale(1.44);
}
.engine-layer img{display:block; width:100%; height:auto; -webkit-user-select:none; user-select:none;}

/* The whole bay is the target, not the 11px dot. */
.engine-zone{
  position:absolute;
  left:var(--x); top:var(--y); width:var(--w); height:var(--h);
  margin:0; padding:0; font:inherit; color:inherit;
  background:transparent; cursor:pointer;
  border:2px solid transparent; border-radius:7px;
  transition:border-color 220ms cubic-bezier(.2,.9,.25,1),
             background-color 220ms cubic-bezier(.2,.9,.25,1),
             box-shadow 220ms cubic-bezier(.2,.9,.25,1),
             transform 140ms cubic-bezier(.2,.9,.25,1);
}
.engine-zone:hover, .engine-zone:focus-visible{
  border-color:var(--amber);
  background:rgba(255,153,0,0.10);
  box-shadow:inset 0 0 26px rgba(255,153,0,0.30);
}
.engine-zone:focus-visible{outline:2px solid #fff; outline-offset:3px;}
.engine-zone:active{transform:scale(0.985);}

/* The chosen bay stays framed after the dialog closes; the oversized spread
   dims everything outside it and .engine-frame clips it. */
.engine-zone.is-open{
  border-color:var(--amber);
  background:rgba(255,153,0,0.10);
  box-shadow:inset 0 0 26px rgba(255,153,0,0.30), 0 0 0 100vmax rgba(11,17,24,0.55);
}

/* ::before is the pulse, ::after the dot. */
.engine-zone::before, .engine-zone::after{
  content:""; position:absolute; left:var(--dx); top:var(--dy);
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
}
.engine-zone::before{
  width:20px; height:20px; background:rgba(255,153,0,0.40);
  animation:engine-ping 1.7s cubic-bezier(0,0,0.2,1) infinite;
  transition:opacity 180ms cubic-bezier(.2,.9,.25,1);
}
.engine-zone::after{
  width:11px; height:11px;
  background:var(--amber); border:1px solid rgba(19,26,34,0.7);
  box-shadow:0 0 10px 2px rgba(255,153,0,0.6);
  transition:transform 220ms cubic-bezier(.2,.9,.25,1),
             background-color 220ms cubic-bezier(.2,.9,.25,1),
             box-shadow 220ms cubic-bezier(.2,.9,.25,1);
}
.engine-zone:hover::before, .engine-zone:focus-visible::before, .engine-zone.is-open::before{
  animation:none; opacity:0;
}
.engine-zone:hover::after, .engine-zone:focus-visible::after, .engine-zone.is-open::after{
  transform:translate(-50%,-50%) scale(1.5);
  background:#fff; box-shadow:0 0 14px 4px rgba(255,153,0,0.85);
}
@keyframes engine-ping{
  75%, 100%{transform:translate(-50%,-50%) scale(2); opacity:0;}
}

/* One caption rail rather than four floating tooltips: nothing is clipped by
   the frame edge and nothing inherits the crop's scale. */
.engine-caption{
  display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px;
  min-height:62px; padding:12px 16px;
  border-top:1px solid rgba(255,255,255,0.10);
  background:rgba(11,17,24,0.55);
}
.engine-caption strong{
  color:var(--amber);
  font-family:'Roboto Mono', ui-monospace, monospace;
  font-size:11px; font-weight:600; letter-spacing:0.16em; text-transform:uppercase;
}
/* Says out loud what the frame only implies. */
.engine-hint{
  color:rgba(255,255,255,0.6);
  font-family:'Roboto Mono', ui-monospace, monospace;
  font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
}
.engine-caption p{margin:0; flex:1 1 100%; color:#C7CCD1; font-size:13.5px; line-height:1.5;}

@media (max-width:600px){
  .engine-caption{min-height:74px;}
}

@media (prefers-reduced-motion: reduce){
  .engine-zone::before{animation:none;}
  .engine-zone, .engine-zone::before, .engine-zone::after{transition:none;}
  .engine-zone:active{transform:none;}
}

/* Interactive service overview in Ausgangslage. */
#problem.engine-section{background:linear-gradient(160deg,#1b2430,#101720);color:#fff;}
#problem.engine-section .title{color:#fff;}
#problem.engine-section .sub{color:#c7ccd1;max-width:66ch;margin-bottom:28px;}
.dsp-engine{margin:0;border:0;background:transparent;box-shadow:none;overflow:visible;}
.engine-frame{aspect-ratio:auto;border:1px solid #ff99004a;border-radius:12px;box-shadow:0 24px 70px #0006;isolation:isolate;}
.engine-frame::after{content:'';position:absolute;inset:10px;pointer-events:none;background:linear-gradient(#ffb752,#ffb752) top left/24px 1px no-repeat,linear-gradient(#ffb752,#ffb752) top left/1px 24px no-repeat,linear-gradient(#ffb752,#ffb752) bottom right/24px 1px no-repeat,linear-gradient(#ffb752,#ffb752) bottom right/1px 24px no-repeat;}
.engine-layer{position:relative;top:auto;left:auto;transform:none;}
.engine-zone::before,.engine-zone::after{display:none;}
.engine-zone.is-open{box-shadow:inset 0 0 25px #ff990018;background:#ff990010;}
.engine-zone-label{position:absolute;bottom:-30px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 10px;border:1px solid #ffb75266;border-radius:4px;background:#101a24e8;backdrop-filter:blur(12px);color:#fff;font-size:10px;font-weight:600;letter-spacing:.04em;box-shadow:0 5px 18px #0008;}
.engine-caption{margin:18px 0 16px;border:0;border-left:2px solid var(--amber);background:linear-gradient(90deg,#ff990009,transparent);min-height:70px;}
.engine-menu{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:module;}
.engine-menu-button{display:flex;align-items:center;gap:14px;min-height:72px;padding:18px;cursor:pointer;text-align:left;border:1px solid #8297ae38;border-radius:6px;background:linear-gradient(135deg,#263647a8,#121c28e0);box-shadow:inset 0 1px #ffffff09;color:#e4e8ed;font:500 14px 'Inter',sans-serif;transition:border-color 180ms ease,transform 180ms ease;}
.engine-menu-button::before{counter-increment:module;content:'0' counter(module);font:11px 'Roboto Mono',monospace;letter-spacing:.08em;color:#ffb752;}
.engine-menu-button::after{content:'+';margin-left:auto;color:#ffb752;font-size:21px;font-weight:300;}
.engine-menu-button.is-open,.engine-menu-button:hover{border-color:#ff9900aa;color:white;}
.engine-menu-button:focus-visible{outline:2px solid var(--amber);outline-offset:4px;}
.module-modal{border-color:#ff990066;border-top:2px solid #ffb752;background:linear-gradient(145deg,#243344,#111923);}
@media(hover:hover) and (pointer:fine){.engine-menu-button:hover{transform:translateY(-2px);}}

@media(max-width:600px){



 .engine-menu{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
 .engine-menu-button{min-height:64px;padding:14px;gap:9px;}
 .engine-zone{display:none;}
 .engine-caption{min-height:88px;}
}
@media(prefers-reduced-motion:reduce){.engine-menu-button{transition:none;}.engine-menu-button:hover{transform:none;}}