.callback {
--alert-rgb:     220, 53, 69;
--confirm-rgb:   25, 135, 84;
--info-rgb:      255, 193, 7;
--trust-rgb:     13, 110, 253;
--border-color-alert: rgba(var(--alert-rgb));
--background-color-alert: rgba(var(--alert-rgb), 0.15);
--border-color-confirm: rgba(var(--confirm-rgb));
--background-color-confirm: rgba(var(--confirm-rgb), 0.15);
--border-color-info: rgba(var(--info-rgb));
--background-color-info: rgba(var(--info-rgb), 0.15);
--border-color-trust: rgba(var(--trust-rgb));
--background-color-trust: rgba(var(--trust-rgb), 0.15);
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  border-style: var(--border-style-solid);
  border-width: var(--border-width-thin);
  border-left-width: var(--border-width-medium);
  border-color: var(--border-color-light);
  border-top-right-radius: var(--border-radius-md);
  border-bottom-right-radius: var(--border-radius-md);
  background-color: var(--light);
  padding: var(--spacing-xl);
 }

.callback-icon {
  flex: 0 0 2.5rem;      /* feste Breite -> Text bleibt daneben */
  display: inline-flex;  /* damit ::before sauber sitzt */
  align-items: flex-start;
  justify-content: center;
  margin-top: 0.125rem;   /* optional: kleine optische Korrektur */
  
}

.callback-icon::before {
  font: var(--fa-font-regular);
  content: "\f8fa";
  font-size: 1.75rem;
  line-height: 1;
  color: inherit;
}

.callback p {
  margin: 0;
  flex: 1;               /* Text nimmt den restlichen Platz */
  min-width: 0;          /* wichtig gegen "komisches umbrechen" */
}

.callback-headline {
display: block;
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.25rem;
}

 .callback-alert {
  border-color: var(--border-color-alert);
  background-color: var(--background-color-alert);
 }
 .callback-alert-icon::before {
  font: var(--fa-font-regular);
  content: "\e417";
  font-size: 1.75rem;
  line-height: 1;
  color: rgb(var(--alert-rgb));
 }
 .callback-alert .callback-headline {
  color: var(--rot-6);
 }
 .callback-confirm {
  border-color: var(--border-color-confirm);
  background-color: var(--background-color-confirm);
 }
 .callback-confirm .callback-headline {
  color: var(--green-6);
 }
 .callback-confirm-icon::before {
  font: var(--fa-font-regular);
  content: "\f00c";
  font-size: 1.75rem;
  line-height: 1;
  color: rgb(var(--confirm-rgb));
 }
 .callback-info .callback-headline {
  color: var(--yellow-6);
 }
 .callback-info {
  border-color: var(--border-color-info);
  background-color: var(--background-color-info);
 }
.callback-info-icon::before {
  font: var(--fa-font-regular);
  content: "\f05a";
  font-size: 1.75rem;
  line-height: 1;
  color: rgb(var(--orange-rgb));
 }
 .callback-trust {
  border-color: var(--border-color-trust);
  background-color: var(--background-color-trust);
 }
 .callback-trust .callback-headline {
  color: var(--blue-6);
 }
 .callback-trust-icon::before {
  font: var(--fa-font-regular);
  content: "\f872";
  font-size: 1.75rem;
  line-height: 1;
  color: rgb(var(--trust-rgb));
 }