.website-calculator {
  scroll-margin-top: 8rem;

  & .__planner {
    border: 1px solid var(--line); border-radius: var(--r); background: var(--bg);
    overflow: hidden;
  }
  & .__consent {
    display: grid; grid-template-columns: 2fr 3fr;

    picture { display: block; min-width: 0; }
    img { display: block; width: 100%; height: 100%; object-fit: cover; }
    h3 { font-size: clamp(28px, 3vw, 36px); }
    a { color: var(--blue); }
    details { width: 100%; font-size: 15px; }
    summary { cursor: pointer; color: var(--blue); }
    details p { margin-top: 12px; }
    .ctas { margin-top: 16px; }

    @media (max-width: 820px) {
      grid-template-columns: 1fr;

      picture { aspect-ratio: 16 / 9; }
    }
  }
  & .__invitation {
    display: grid; justify-items: start; align-content: center; gap: 20px; padding: 40px;

    @media (max-width: 820px) {
      padding: 24px;
    }
  }
  & .__privacy { font-size: 15px; color: var(--muted); }
  & .__start {
    max-width: 100%;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 10%, transparent), 0 4px 16px color-mix(in srgb, var(--blue) 10%, transparent);

    &:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
    &:disabled { cursor: wait; }
    > span:first-child { min-width: 0; }
    > span:last-child { flex: none; font-size: 20px; line-height: 1; }
  }
  & .__loading { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 24rem; padding: 24px; }
  & #meister1-calculator { min-height: 24rem; background: var(--bg); }
  & iframe { display: block; width: 100%; border: 0; border-radius: var(--r); outline: none; }
  & .__revoke {
    margin: 16px 24px 24px; padding: 0; border: 0; background: none; color: var(--blue);
    font: inherit; text-decoration: underline; cursor: pointer;
  }
  & .__contact { margin-top: 24px; color: var(--muted); }
  & .__contact a { color: var(--blue); }
  & [hidden] { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .website-calculator .__start:not(:disabled) { animation: planner-highlight 3.2s ease-in-out infinite; }
  .website-calculator .__start:is(:hover, :focus-visible):not(:disabled) > span:last-child { animation: planner-arrow 2.4s ease-in-out infinite; }
}

@media (prefers-reduced-motion: reduce) {
  .website-calculator .at-loader { animation: none; }
}

@keyframes planner-arrow {
  0%, 60%, 100% { transform: translateX(0); }
  30% { transform: translateX(8px); }
}

@keyframes planner-highlight {
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--blue) 10%, transparent), 0 4px 24px color-mix(in srgb, var(--blue) 20%, transparent); }
}