/* Kontaktkarte fuer aktive Besucher: bewusst sitewide, aber erst nach dem
   Engagement-Delay sichtbar. Die 9:16-Proportion des Videos bleibt erhalten. */
.sfx-engagement-contact[hidden] { display: none !important; }
.sfx-engagement-contact {
  position: fixed;
  z-index: 10020;
  right: clamp(.75rem, 2vw, 1.5rem);
  bottom: clamp(.75rem, 2vw, 1.5rem);
  width: min(25rem, calc(100vw - 1.5rem));
  color: #1f1f1f;
  pointer-events: none;
}
.sfx-engagement-contact-panel {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 1.1rem;
  border: 1px solid rgba(31, 31, 31, .2);
  border-radius: 1.65rem .45rem 1.65rem 1.65rem;
  background: #ff8585;
  box-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translate3d(1.5rem, 1.5rem, 0) scale(.96);
  transition: opacity 360ms ease, transform 480ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: auto;
}
.sfx-engagement-contact.is-open .sfx-engagement-contact-panel { opacity: 1; transform: none; }
.sfx-engagement-contact-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; }
.sfx-engagement-kicker, .sfx-engagement-label { display: flex; align-items: center; gap: .42rem; margin: 0 0 .42rem; font-size: .64rem; font-weight: 700; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; }
.sfx-engagement-kicker span { width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; }
.sfx-engagement-contact-head h2 { max-width: 18rem; margin: 0; font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 450; letter-spacing: -.045em; line-height: .98; }
.sfx-engagement-close { display: grid; flex: 0 0 2.2rem; width: 2.2rem; height: 2.2rem; place-items: center; padding: 0; border: 1px solid rgba(31, 31, 31, .45); border-radius: .7rem; color: inherit; background: rgba(255, 255, 255, .18); cursor: pointer; transition: background 180ms ease, transform 180ms ease; }
.sfx-engagement-close:hover { background: rgba(255, 255, 255, .42); transform: rotate(5deg); }
.sfx-engagement-close:focus-visible, .sfx-engagement-play:focus-visible, .sfx-engagement-links a:focus-visible, .sfx-engagement-calendar a:focus-visible { outline: 2px solid #1f1f1f; outline-offset: 3px; }
.sfx-engagement-close svg { width: 1.05rem; height: 1.05rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
.sfx-engagement-video-shell { position: relative; display: grid; width: min(100%, 14rem); aspect-ratio: 226 / 400; margin: 0 auto .95rem; overflow: hidden; border: 1px solid rgba(31, 31, 31, .28); border-radius: 1.1rem .3rem 1.1rem 1.1rem; background: #162125; }
.sfx-engagement-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #162125; }
.sfx-engagement-play { position: absolute; top: 50%; left: 50%; display: grid; width: 3.9rem; height: 3.9rem; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #ff8585; background: #1f1f1f; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .28); cursor: pointer; transform: translate(-50%, -50%); transition: opacity 220ms ease, transform 220ms ease, background 180ms ease; }
.sfx-engagement-play:hover { background: #000; transform: translate(-50%, -50%) scale(1.06); }
.sfx-engagement-play svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.sfx-engagement-play .sfx-engagement-pause-icon { display: none; fill: none; stroke: currentColor; stroke-width: 2; }
.sfx-engagement-play.is-playing .sfx-engagement-play-icon { display: none; }
.sfx-engagement-play.is-playing .sfx-engagement-pause-icon { display: block; }
.sfx-engagement-play.is-dismissed { opacity: 0; pointer-events: none; }
.sfx-engagement-video-note { position: absolute; right: .65rem; bottom: .6rem; left: .65rem; color: rgba(255, 255, 255, .78); font-size: .68rem; line-height: 1.2; text-align: center; text-shadow: 0 1px 5px rgba(0, 0, 0, .5); }
.sfx-engagement-direct { padding-top: .8rem; border-top: 1px solid rgba(31, 31, 31, .23); }
.sfx-engagement-label { margin-bottom: .1rem; opacity: .68; }
.sfx-engagement-name { margin: 0 0 .65rem; font-size: 1.05rem; font-weight: 650; }
.sfx-engagement-links { display: grid; gap: .45rem; }
.sfx-engagement-links a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; padding: .55rem .65rem; border: 1px solid rgba(31, 31, 31, .24); border-radius: .65rem; color: inherit; text-decoration: none; transition: background 180ms ease, border-color 180ms ease; }
.sfx-engagement-links a:hover { border-color: rgba(31, 31, 31, .5); background: rgba(255, 255, 255, .2); }
.sfx-engagement-links a span:first-child { grid-column: 1 / -1; font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; opacity: .68; }
.sfx-engagement-links a strong { min-width: 0; overflow: hidden; font-size: .84rem; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sfx-engagement-links a span:last-child { font-size: 1.15rem; }
.sfx-engagement-calendar { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid rgba(31, 31, 31, .23); animation: sfx-engagement-rise 500ms cubic-bezier(.22, 1, .36, 1) both; }
.sfx-engagement-calendar[hidden] { display: none; }
.sfx-engagement-calendar p { margin: 0 0 .45rem; font-size: .82rem; }
.sfx-engagement-calendar a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .68rem .8rem; border-radius: .65rem; color: #ff8585; background: #1f1f1f; font-size: .84rem; font-weight: 650; text-decoration: none; }
.sfx-engagement-calendar a span { font-size: 1.15rem; }
@keyframes sfx-engagement-rise { from { opacity: 0; transform: translateY(.75rem); } to { opacity: 1; transform: none; } }
body.sfx-engagement-active .e-contact-buttons { display: none !important; }
@media (max-width: 520px) { .sfx-engagement-contact { right: .5rem; bottom: .5rem; width: calc(100vw - 1rem); } .sfx-engagement-contact-panel { padding: .85rem; border-radius: 1.35rem .35rem 1.35rem 1.35rem; } .sfx-engagement-video-shell { width: min(11.5rem, 58vw); } }
@media (prefers-reduced-motion: reduce) { .sfx-engagement-contact-panel, .sfx-engagement-calendar { transition: none; animation: none; } }