/* "Wir fahren." - 3D Einsatzgebiet.
   The render is deliberately borderless: the WebGL floor fades into pure white
   through distance fog, and the stage carries the same white as the page, so
   there is no visible frame, box or edge anywhere between the 3D scene and the
   rest of the website. */

.einsatz3d {
  position: relative;
  /* This section now opens the page - it carries the H1 in place of the old
     hero banner, so it brings its own top spacing. */
  padding: clamp(40px, 5vw, 76px) 0 56px;
  background: #fff;
}

.einsatz3d .section-header {
  opacity: 1;
  transform: none;
  margin-top: 0;
}

/* The H1 replaces the section H2 here and has to look the same. */
.einsatz3d .section-header h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  margin: 0 0 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Direct way into the quote configurator further down the page (Maler and
   Fliesenleger homepages), with the trade already selected. */
.einsatz3d-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 22px;
  margin-top: 18px;
}

.einsatz3d-phone {
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.einsatz3d-phone strong { color: var(--headline-tone, #23272e); }
.einsatz3d-phone:hover strong { color: var(--brand); }

/* Full bleed: the render spans the entire width of the page, only the headline
   above it stays inside the normal content container. */
.einsatz3d-frame {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 22px 0 0;
  padding: 0;
  background: #fff;
}

.einsatz3d-stage {
  position: relative;
  width: 100%;
  height: clamp(400px, 56vh, 620px);
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  contain: layout paint;
}

.einsatz3d-stage canvas {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* Pre-rendered still of the scene (see einsatz3d/boot.js). It paints with the
   page; the live canvas, when it runs at all, fades in on top once its first
   frame is drawn. */
.einsatz3d-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.einsatz3d-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.einsatz3d-stage.has-poster canvas {
  opacity: 0;
  transition: opacity 0.6s ease;
}
/* .is-live: first frame drawn with the logo on it (see index.js reveal()). */
.einsatz3d-stage.has-poster.is-live canvas {
  opacity: 1;
}
/* With a poster there is nothing to wait for, so no spinner. */
.einsatz3d-stage.has-poster:not(.is-ready)::before {
  display: none;
}

/* ---------------------------------------------------------------- caption */

.einsatz3d-caption {
  position: absolute;
  right: clamp(20px, 6vw, 96px);
  bottom: clamp(24px, 7%, 76px);
  z-index: 3;
  max-width: min(460px, 56%);
  text-align: right;
  pointer-events: none;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.einsatz3d-frame:has(.einsatz3d-stage.show-caption) .einsatz3d-caption,
.einsatz3d-frame:has(.einsatz3d-stage.is-static) .einsatz3d-caption {
  opacity: 1;
  transform: translateY(0);
}

.einsatz3d-caption h2 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 48px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--headline-tone, #23272e);
}

.einsatz3d-caption h2 .accent {
  display: block;
  color: var(--brand, #cf1f28);
}

.einsatz3d-caption p {
  margin: 12px 0 0;
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.6;
  font-weight: 500;
  color: var(--muted, #5b636c);
}

/* ------------------------------------------------------------- key figures */

/* Three figures that arrive with the camera move rather than sitting on top of
   it as a caption bar: left of the scene, hairline rule, number, label. */
.einsatz3d-stats {
  position: absolute;
  left: clamp(20px, 6vw, 96px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 3vh, 34px);
  pointer-events: none;
}

.einsatz3d-stat {
  position: relative;
  padding-left: 18px;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.einsatz3d-stat::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--brand, #cf1f28);
}

.einsatz3d-stat b {
  display: block;
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--headline-tone, #23272e);
}

.einsatz3d-stat span {
  display: block;
  margin-top: 4px;
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand, #cf1f28);
}

.einsatz3d-stat em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: clamp(12px, 1.05vw, 14px);
  color: var(--muted, #5b636c);
}

.einsatz3d-frame:has(.einsatz3d-stage.show-stat-a) .einsatz3d-stat[data-stat="a"],
.einsatz3d-frame:has(.einsatz3d-stage.show-stat-b) .einsatz3d-stat[data-stat="b"],
.einsatz3d-frame:has(.einsatz3d-stage.show-stat-c) .einsatz3d-stat[data-stat="c"],
.einsatz3d-frame:has(.einsatz3d-stage.is-static) .einsatz3d-stat {
  opacity: 1;
  transform: translateX(0);
}

/* --------------------------------------------------------------- fallback */

.einsatz3d-fallback {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 4;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 28px;
  text-align: center;
  background: #fff;
  color: #23272e;
}

.einsatz3d-stage.is-unsupported .einsatz3d-fallback {
  display: flex;
}

.einsatz3d-fallback img {
  width: min(280px, 60%);
  height: auto;
}

.einsatz3d-fallback p {
  margin: 0;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.65;
  color: #5b636c;
}

/* ------------------------------------------------------------ loading hint */

.einsatz3d-stage:not(.is-ready)::before {
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 3px solid rgba(207, 31, 40, 0.2);
  border-top-color: var(--brand, #cf1f28);
  animation: einsatz3dSpin 0.9s linear infinite;
}

@keyframes einsatz3dSpin {
  to { transform: rotate(360deg); }
}


/* On a short or narrow stage the figures would sit on top of the map, so they
   drop out of the scene and line up underneath it. */
@media (max-width: 900px) {
  .einsatz3d-stats {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 26px;
    margin: 14px auto 0;
    padding: 0 5vw;
  }
  .einsatz3d-stat { transform: translateY(10px); padding-left: 14px; }
  .einsatz3d-frame:has(.einsatz3d-stage.show-stat-a) .einsatz3d-stat[data-stat="a"],
  .einsatz3d-frame:has(.einsatz3d-stage.show-stat-b) .einsatz3d-stat[data-stat="b"],
  .einsatz3d-frame:has(.einsatz3d-stage.show-stat-c) .einsatz3d-stat[data-stat="c"],
  .einsatz3d-frame:has(.einsatz3d-stage.is-static) .einsatz3d-stat { transform: translateY(0); }
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .einsatz3d-stage {
    height: clamp(330px, 46vh, 460px);
  }
}

/* On phones the render is too shallow to hold the caption as well, so the
   caption drops out of the scene and sits underneath it. */
@media (max-width: 640px) {
  .einsatz3d {
    padding-bottom: 40px;
  }
  .einsatz3d-stage {
    height: clamp(280px, 40vh, 360px);
  }
  .einsatz3d-caption {
    position: static;
    max-width: none;
    margin: 16px auto 0;
    padding: 0 5vw;
    transform: none;
    text-align: left;
  }
  .einsatz3d-caption h2 {
    font-size: clamp(24px, 7vw, 34px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .einsatz3d-caption {
    transition: none;
  }
  .einsatz3d-stage:not(.is-ready)::before {
    animation: none;
  }
}