/* Kontakt-Popup: runder Porträt-Knopf + einfahrende Karte.
   Nutzt die Farb-Tokens der jeweiligen Seite (Design: --accent/--surface, Neu: --blue/--bg). */

.cp {
  --cp-accent: var(--accent, var(--blue, #00a6e0));
  --cp-surface: var(--surface, var(--bg, #fff));
  --cp-ink: var(--ink, #1b2430);
  --cp-muted: var(--muted, var(--ink-soft, #4a5868));
  --cp-line: var(--line, #dde4ea);
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 200; display: flex; flex-direction: column; align-items: flex-end; gap: 14px;
  pointer-events: none;
}
.cp[hidden] { display: none; }

/* Runder Knopf mit Porträt */
.cp__fab {
  pointer-events: auto; position: relative; width: 68px; height: 68px; padding: 0; border: 0;
  border-radius: 50%; cursor: pointer; background: var(--cp-surface);
  box-shadow: 0 0 0 3px var(--cp-accent), 0 10px 30px rgba(10, 30, 50, .3);
  transform: translateY(140%) scale(.6); opacity: 0;
  transition: transform .55s cubic-bezier(.2, 1.3, .4, 1), opacity .3s;
}
.cp.is-in .cp__fab { transform: none; opacity: 1; }
.cp__fab img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.cp__fab::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 3px solid var(--cp-accent); animation: cp-ring 2.4s ease-out infinite;
}
@keyframes cp-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.45); opacity: 0; } }
.cp__dot {
  position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #2fbf71; border: 3px solid var(--cp-surface);
}

/* Karte */
.cp__card {
  pointer-events: auto; width: min(360px, calc(100vw - 32px));
  background: var(--cp-surface); color: var(--cp-ink); border: 1px solid var(--cp-line);
  border-radius: 20px; padding: 20px 20px 18px; position: relative;
  box-shadow: 0 20px 60px rgba(10, 30, 50, .28);
  transform-origin: bottom right; transform: translateY(16px) scale(.94); opacity: 0; visibility: hidden;
  transition: transform .35s cubic-bezier(.2, 1.2, .4, 1), opacity .25s, visibility .25s;
}
.cp.is-open .cp__card { transform: none; opacity: 1; visibility: visible; }
.cp__card::after {
  content: ""; position: absolute; right: 26px; bottom: -8px; width: 16px; height: 16px;
  background: var(--cp-surface); border-right: 1px solid var(--cp-line); border-bottom: 1px solid var(--cp-line);
  transform: rotate(45deg);
}
.cp__close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 10px;
  background: transparent; color: var(--cp-muted); cursor: pointer; font-size: 22px; line-height: 1;
}
.cp__close:hover { background: color-mix(in srgb, var(--cp-accent) 12%, transparent); color: var(--cp-ink); }
.cp__head { display: flex; gap: 12px; align-items: center; margin: 0 30px 12px 0; }
.cp__head img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.cp__name { font-weight: 700; line-height: 1.2; }
.cp__role { font-size: .8rem; color: var(--cp-muted); }
.cp__text { margin: 0 0 14px; font-size: .97rem; line-height: 1.5; }
.cp__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cp__btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 12px;
  border-radius: 12px; font-weight: 650; font-size: .92rem; text-decoration: none;
  border: 1.5px solid var(--cp-accent); color: var(--cp-ink); background: transparent;
}
.cp__btn--primary { background: var(--accent-btn, var(--cp-accent)); color: #fff; }
:root[data-theme="dark"] .cp__btn--primary { color: #04121d; }
.cp__btn svg { width: 18px; height: 18px; flex: none; }
.cp__btn--wide { grid-column: 1 / -1; border-color: var(--cp-line); }
.cp__btn--wide:hover { border-color: var(--cp-accent); }

@media (max-width: 480px) {
  .cp__fab { width: 60px; height: 60px; }
  .cp__card { padding: 18px 16px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .cp__fab, .cp__card { transition: none; }
  .cp__fab::before { animation: none; display: none; }
}