/* ==========================================================================
   ODEN-STEEL COMPONENT / PROJECT COMPARE — ASSET + PLACEHOLDER
   --------------------------------------------------------------------------
   Shared placeholder and image fallback styles for all service pages.
   ========================================================================== */

html.no-js .project-compare__image--after,
html.no-js .project-compare__handle,
html.no-js .project-compare__labels {
  display: none;
}

html.no-js .project-compare__range {
  display: none;
}

.project-compare__frame:focus-within {
  outline: 2px solid rgba(214, 163, 0, 0.55);
  outline-offset: 4px;
}

.project-compare__image.is-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(214, 163, 0, 0.08),
    rgba(255, 255, 255, 0.03)
  );
}

.project-compare__image.is-placeholder img {
  display: none;
}

.project-compare__image.is-placeholder::before {
  content: "";
  width: 84px;
  height: 84px;
  border-radius: 999px;
  border: 1px solid rgba(214, 163, 0, 0.34);
  background: radial-gradient(
    circle,
    rgba(214, 163, 0, 0.16),
    transparent 62%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.project-compare__image.is-placeholder::after {
  content: "";
  width: min(200px, 72%);
  height: 56px;
  margin-top: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='56' viewBox='0 0 200 56' aria-hidden='true'%3E%3Ctext x='100' y='16' text-anchor='middle' fill='rgba(255,255,255,0.72)' font-family='system-ui,sans-serif' font-size='11' font-weight='800' letter-spacing='3.5'%3EPROJEKTFOT%C3%93%3C/text%3E%3Ctext x='100' y='46' text-anchor='middle' fill='rgba(255,255,255,0.72)' font-family='system-ui,sans-serif' font-size='26' font-weight='800'%3EHAMAROSAN%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}