/* =========================================================
   setsign.me — die Demo als Overlay

   Der Demo-Link führt nicht weg von der Seite, sondern legt das echte
   Formular darüber. Wer sich gerade fragt, ob das Ding etwas taugt, soll es
   ansehen können, ohne den Faden zu verlieren — und mit einem Tastendruck
   wieder da sein, wo er war.

   Im Rahmen läuft das echte Formular unter /sign/demo/model-release, kein
   Video und kein Screenshot. Deshalb liefert der Server die App-Seiten mit
   X-Frame-Options: SAMEORIGIN statt DENY aus (server/index.ts) — fremde
   Seiten dürfen weiterhin nichts einbetten.
   ========================================================= */

.demo-scrim {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(0, 0, 0, 0.62);
  /* Der verschwommene Hintergrund. -webkit- für Safari, das die Eigenschaft
     bis heute nur mit Präfix kennt. */
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-scrim.offen { opacity: 1; }

.demo-fenster {
  position: fixed;
  z-index: 91;
  left: 50%;
  top: 50%;
  width: min(460px, calc(100vw - 32px));
  /* Hochformat: Das Formular ist für ein Handy gebaut, und genau so soll es
     hier auch stehen. */
  height: min(860px, calc(100dvh - 96px));
  transform: translate(-50%, -50%) scale(0.96);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  background: #0a0b0b;
  border: 1px solid rgba(255, 255, 255, 0.14);
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.demo-fenster.offen {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.demo-kopf {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.demo-titel {
  font-family: var(--font-display, "BDO Grotesk", system-ui, sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #fff;
  line-height: 1.2;
}

.demo-untertitel {
  display: block;
  margin-top: 2px;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: #8e8e8e;
}

.demo-zu {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: transparent;
  color: #c8c8c8;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.demo-zu:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.demo-rahmen {
  flex: 1;
  width: 100%;
  border: 0;
  display: block;
  background: #fff;
}

.demo-fuss {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px 12px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #8e8e8e;
}

.demo-fuss a {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
  white-space: nowrap;
}

.demo-fuss a:hover { border-bottom-color: #fff; }

/* Auf schmalen Flächen nimmt das Fenster fast alles ein — ein Rahmen mit
   Rand um ein Formular, das selbst schon einen Rand hat, ist Verschwendung. */
@media (max-width: 520px) {
  .demo-fenster {
    width: calc(100vw - 16px);
    height: calc(100dvh - 32px);
    border-radius: 18px;
  }

  .demo-fuss { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-scrim,
  .demo-fenster { transition: none; }
}