/* Ausruf (docs/ausruf.md): das Megafon in der Kopfzeile und die zweistufige Seite dahinter. */

.home-header__actions {
  display: flex;
  align-items: center;
  justify-self: end;
  gap: var(--space-2);
}

.callout-button {
  position: relative;
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
}

.callout-button:hover,
.callout-button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.callout-button__icon {
  width: 1.4rem;
  height: 1.4rem;
}

/* Wartende Ausrufe (ohne Netz abgeschickt) als kleine Zahl am Knopf. */
.callout-button__badge {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  color: var(--accent-ink);
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
  background: var(--accent);
}

/* Im Backend-Layout sitzt das Megafon rund neben dem Farbschema-Knopf. */
.top-nav__callout {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  color: var(--ink-muted);
}

.callout-form {
  display: grid;
  gap: var(--space-5);
}

.callout-field {
  gap: var(--space-3);
}

.callout-send {
  width: 100%;
}