.contact-record-actions {
  display:flex;
  flex-wrap:wrap;
  gap:var(--zg-space-2);
  margin-right:auto;
}
.email-composer header {
  display:block;
  padding-right:calc(var(--zg-button-icon-size) + 2 * var(--zg-space-3));
  border-bottom:1px solid var(--zg-border-soft)
}
.email-composer h2 {
  margin:0;
}
.email-composer-body {
  display:grid;
  gap:var(--zg-form-field-gap);
}
.email-composer-body label {
  display:grid;
  gap:var(--zg-space-2);
  min-width:0;
  font-size:var(--zg-font-label);
}
.email-composer-body :is(input,textarea) {
  width:100%;
}
.email-composer footer span {
  margin-right:auto;
  font-size:var(--zg-font-caption);
}
.contact-email-history {
  margin-top:var(--zg-space-5);
  padding-top:var(--zg-space-4);
  border-top:1px solid var(--zg-border-soft);
}
.contact-email-history:before {
  content:"E-Mail-Verlauf";
  display:block;
  margin-bottom:var(--zg-space-3);
  font-size:var(--zg-font-label);
  font-weight:var(--zg-weight-bold);
}
.email-history-item {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--zg-space-1) var(--zg-space-3);
  padding-block:var(--zg-space-3);
  border-top:1px solid var(--zg-border-soft);
}
.email-history-item strong,.email-history-item small {
  display:block;
}
.email-history-item small,.email-history-empty {
  color:var(--zg-text-muted);
  font-size:var(--zg-font-caption);
}
.email-history-item p {
  grid-column:1/-1;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:var(--zg-space-1) 0 0;
}
.email-status {
  background:var(--zg-surface-soft);
  color:var(--zg-text-secondary);
}
.email-status.sent {
  color:var(--zg-state-success);
  border-color:var(--zg-state-success);
}
.email-status.failed,.email-history-empty.error {
  color:var(--zg-state-danger);
}
@media(max-width:700px) {
  .contact-record-actions {
    width:100%;
    order:-1;
  }
  .contact-record-actions .button {
    flex:1;
  }
}