/* mikrofon-button — drei Zustände: idle, listening, processing */
.mikrofon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-comfort);
  height: var(--touch-comfort);
  min-width: var(--touch-comfort);
  border-radius: var(--radius-full);
  background: var(--speech-idle-bg);
  color: var(--speech-idle-fg);
  box-shadow: var(--shadow-md);
  transition: background var(--transition-base),
              transform var(--transition-fast),
              box-shadow var(--transition-fast);
  border: none;
  cursor: pointer;
}
.mikrofon-button:hover { transform: scale(1.04); }
.mikrofon-button:active { transform: scale(0.97); }

.mikrofon-button__icon { width: 28px; height: 28px; display: block; }

.mikrofon-button__ring {
  position: absolute;
  inset: -6px;
  border-radius: var(--radius-full);
  border: 3px solid var(--profil-aktiv-strong);
  opacity: 0;
  pointer-events: none;
}

.mikrofon-button[data-zustand="listening"] {
  background: var(--speech-listening-bg);
  color: var(--speech-listening-fg);
  animation: mikrofon-pulse var(--speech-listening-pulse) ease-in-out infinite;
}
.mikrofon-button[data-zustand="listening"] .mikrofon-button__ring {
  animation: mikrofon-ring var(--speech-listening-pulse) ease-out infinite;
}

.mikrofon-button[data-zustand="processing"] {
  background: var(--speech-processing-bg);
  color: var(--speech-processing-fg);
  animation: mikrofon-shimmer 1800ms linear infinite;
}

@keyframes mikrofon-pulse {
  0%, 100% { box-shadow: var(--shadow-md); }
  50%      { box-shadow: 0 0 0 6px var(--profil-aktiv-tint), var(--shadow-md); }
}
@keyframes mikrofon-ring {
  0%   { transform: scale(0.9); opacity: 0.7; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes mikrofon-shimmer {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .mikrofon-button[data-zustand="listening"],
  .mikrofon-button[data-zustand="processing"] { animation: none; }
  .mikrofon-button[data-zustand="listening"] .mikrofon-button__ring { animation: none; opacity: 0.5; }
}