/* Seitenspezifische Stile fuer /funktionen/e-mail/ -- nur diese Seite. */

/* --- Rueckfrage beim Senden (nachgebauter Dialog) ------------------------ */
.em-confirm { max-width: 520px; margin-inline: auto; }
.em-confirm__body { gap: 12px; padding: 20px; }
.em-confirm__title { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--text-heading); }
.em-confirm__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.em-confirm__text b { font-weight: 600; color: var(--warn-text); }
.em-confirm__list {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 9px 12px; border-radius: 6px;
  background: var(--warn-bg); border: 1px solid var(--warn-border);
  font-size: 14px; line-height: 1.45; color: var(--warn-text);
}
.em-confirm__list svg { margin-top: 2px; color: var(--warn-icon); }
.em-confirm__list span { min-width: 0; overflow-wrap: anywhere; }
.em-confirm__hint { margin: 0; font-size: 12px; line-height: 1.5; color: var(--text-meta); }
.em-confirm__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.em-confirm__send {
  display: inline-flex; align-items: center; font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: 8px;
  background: #fef3c7; border: 1px solid var(--warn-border); color: var(--warn-text);
}

/* --- E-Mail-Fenster mit Safe-Bereich (nachgebaut) ------------------------ */
.em-frames { max-width: 560px; margin-inline: auto; }
.em-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--accent-deep); }
.em-toggle__switch {
  position: relative; display: inline-flex; width: 30px; height: 17px;
  border-radius: 9999px; background: var(--accent);
}
.em-toggle__switch::after {
  content: ""; position: absolute; top: 2px; right: 2px;
  width: 13px; height: 13px; border-radius: 50%; background: #fff;
}
.em-patient {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: 8px;
  border: 1px solid var(--accent-border); background: var(--accent-fill-soft);
  font-size: 14px; color: var(--accent-dark);
}
.em-patient svg { color: var(--accent); }
.em-patient b { font-weight: 500; }
.em-patient .chip { margin-left: auto; overflow-wrap: anywhere; }

.em-frame { display: flex; flex-direction: column; gap: 9px; padding: 12px; border-radius: 10px; }
.em-frame--open { border: 1px solid var(--warn-border); background: #fffdf5; }
.em-frame--safe { border: 1px solid var(--accent-border); background: var(--accent-fill-soft); }
.em-frame__label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; }
.em-frame--open .em-frame__label { color: var(--warn-text); }
.em-frame--safe .em-frame__label { color: var(--accent-deep); }
.em-frame .mock__field, .em-frame .mock__row { background: #fff; }
.em-frame .mock__row svg { color: var(--accent); }
.em-frame__text {
  display: flex; flex-direction: column; gap: 7px; padding: 11px 12px;
  border: 1px solid var(--border); border-radius: 8px; background: #fff;
}
.em-line { display: block; height: 8px; border-radius: 9999px; background: var(--border-light); }
.em-line--90 { width: 90%; } .em-line--70 { width: 70%; } .em-line--50 { width: 50%; }
.em-link { font-size: 12px; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.em-frame__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.em-frame__grid > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.em-muted { color: var(--text-meta); }

/* --- Diagramm: breite und schmale Fassung -------------------------------- */
.em-diagram__wide { display: none; }
.em-diagram__narrow { display: block; max-width: 420px; margin-inline: auto; }
@media (min-width: 720px) {
  .em-diagram__wide { display: block; }
  .em-diagram__narrow { display: none; }
}