.klingel-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0); transition: background 0.35s ease; }
.klingel-overlay.klingel-da { background: rgba(0, 0, 0, 0.88); }
.klingel-karte { display: flex; flex-direction: column; align-items: center; gap: var(--abstand-4); width: min(20rem, 88vw); padding: var(--abstand-6) var(--abstand-5) var(--abstand-5); border: 1px solid var(--border); border-radius: 1.6rem; background: var(--surface); color: var(--text); text-align: center; transform: translateY(110vh); transition: transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15); }
.klingel-da .klingel-karte { transform: translateY(0); }
.klingel-bild { position: relative; width: 7.5rem; height: 7.5rem; }
.klingel-bild img { position: relative; z-index: 1; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.klingel-initial { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 3rem; font-weight: 700; }
.klingel-bild::before, .klingel-bild::after { content: ""; position: absolute; inset: 0; border: 3px solid var(--accent); border-radius: 50%; animation: klingel-welle 1.8s ease-out infinite; }
.klingel-bild::after { animation-delay: 0.9s; }
.klingel-name { font-size: 1.3rem; font-weight: 700; overflow-wrap: anywhere; }
.klingel-ruft { margin-top: calc(-1 * var(--abstand-3)); color: var(--text-muted); }
.klingel-titel { color: var(--text-muted); font-size: 0.95rem; }
.klingel-knoepfe { display: flex; gap: 3.5rem; margin-top: var(--abstand-2); }
.klingel-knoepfe button { display: flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; border: 0; border-radius: 50%; color: #fff; cursor: pointer; }
.klingel-knoepfe svg { width: 1.9rem; height: 1.9rem; }
.klingel-knoepfe small { display: block; margin-top: 0.45rem; color: var(--text-muted); font-size: 0.8rem; }
.klingel-ab { background: #d93636; }
.klingel-ab svg { transform: rotate(135deg); }
.klingel-an { background: #2fae5a; animation: klingel-wackeln 1.2s ease-in-out infinite; }
@keyframes klingel-welle { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }
@keyframes klingel-wackeln { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-14deg); } 20%, 40% { transform: rotate(14deg); } }
@media (prefers-reduced-motion: reduce) { .klingel-karte { transition: none; } .klingel-an, .klingel-bild::before, .klingel-bild::after { animation: none; } }