/* Panikknopf & Alarm-Signal (Steuerung und Court-Bedienung) */
.panic {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  width: 58px; height: 58px; border-radius: 50%; border: 0; padding: 0;
  background: #dc2626; color: #fff; cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
  display: grid; place-items: center; -webkit-touch-callout: none;
}
.panic:focus-visible { outline: 3px solid #fca5a5; outline-offset: 3px; }
.panic-label { font: 800 14px/1 var(--font); letter-spacing: 0.06em; position: relative; z-index: 1; }
.panic-ring { position: absolute; inset: -5px; width: calc(100% + 10px); height: calc(100% + 10px); transform: rotate(-90deg); pointer-events: none; }
.panic-ring circle {
  fill: none; stroke: #fde047; stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: 182.2; stroke-dashoffset: 182.2; transition: stroke-dashoffset 0.15s ease-out;
}
.panic.holding { transform: scale(1.12); background: #b91c1c; transition: transform 0.2s; }
.panic.holding .panic-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 2s linear; }
.panic.has-open { animation: panicPulse 1s ease-in-out infinite; }
.panic-count {
  position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px; padding: 0 6px;
  background: #facc15; color: #111; font: 800 13px/22px var(--font); text-align: center;
}
@keyframes panicPulse { 50% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0.25), 0 4px 14px rgba(220, 38, 38, 0.45); } }

.alarm-overlay {
  position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 16px;
  background: rgba(127, 0, 0, 0.88); animation: alarmFlash 1s steps(2, jump-none) infinite;
}
.alarm-overlay[hidden] { display: none; }
@keyframes alarmFlash { 50% { background: rgba(220, 38, 38, 0.92); } }
.ao-box {
  width: min(560px, 100%); background: #fff; color: #111; border-radius: 20px; padding: 26px 24px;
  text-align: center; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45); display: grid; gap: 10px;
}
.ao-title { font: 900 44px/1 var(--font); letter-spacing: 0.12em; color: #dc2626; }
.ao-where { font: 800 30px/1.15 var(--font); }
.ao-who { font-size: 17px; color: #374151; }
.ao-note { justify-self: center; background: #fee2e2; color: #991b1b; font-weight: 800; border-radius: 99px; padding: 6px 16px; font-size: 18px; }
.ao-resp { color: #166534; font-weight: 700; }
.ao-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.ao-actions button {
  min-height: 52px; border-radius: 12px; border: 1px solid #d1d5db; background: #f3f4f6; color: #111;
  font: 700 17px var(--font); cursor: pointer;
}
.ao-actions .ao-go { grid-column: 1 / -1; background: #16a34a; border-color: #16a34a; color: #fff; font-size: 20px; min-height: 60px; }
.ao-actions .ao-go:disabled { background: #bbf7d0; border-color: #bbf7d0; color: #166534; }
.ao-more { font-size: 14px; color: #6b7280; }

.alarm-sent {
  position: fixed; left: 86px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  width: min(380px, calc(100vw - 102px)); background: #fff; color: #111; border-radius: 14px; padding: 14px 16px;
  border: 2px solid #dc2626; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); display: grid; gap: 6px; font-size: 14px;
}
.alarm-sent[hidden] { display: none; }
.alarm-sent p { margin: 0; }
.as-head { color: #dc2626; }
.as-resp b { color: #166534; }
.as-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.as-reasons button, .as-actions button {
  border: 1px solid #d1d5db; background: #f9fafb; border-radius: 99px; padding: 6px 12px; font: 600 13px var(--font); cursor: pointer; color: #111;
}
.as-reasons button.active { background: #dc2626; border-color: #dc2626; color: #fff; }
.as-actions { display: flex; justify-content: flex-end; }
.as-actions button { background: #16a34a; border-color: #16a34a; color: #fff; }

.push-toggle {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-3); cursor: pointer;
}
.push-toggle[data-state='on'] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.push-toggle[data-state='insecure'], .push-toggle[data-state='unsupported'], .push-toggle[data-state='denied'] { opacity: 0.5; }