/*
 * core/site/formular-modal.css — Bestaetigung nach dem Absenden eines Formulars.
 *
 * WARUM ES DAS GIBT (14.08.2026): Die Bestaetigung war bis dahin eine Zeile fetter gruener
 * Schrift unter dem Formular. Der Abwesenheitshinweis landete direkt darunter in derselben
 * Schrift und war von ihr nicht zu unterscheiden. Wer gerade seine Krankengeschichte
 * abgeschickt hat, soll aber sehen, dass es angekommen ist — nicht eine Zeile suchen.
 *
 * MARKENNEUTRAL: Alle Farben haengen an Variablen mit Rueckfall. Eine Instanz, die
 * --primary bereits setzt (theme.css der Kundenkonfiguration), faerbt das Modal damit
 * automatisch mit; wer nichts setzt, bekommt ein zurueckhaltendes Gruen.
 *
 * KEINE ABHAENGIGKEITEN: kein Tailwind, kein Bootstrap, kein Framework. Die Datei wird in
 * jeden Kunden-Webroot gespiegelt und muss neben beliebigem Fremd-CSS bestehen. Deshalb
 * durchweg eigene Klassennamen mit dyn-Praefix und keine Element-Selektoren.
 */

.dyn-fm-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;          /* ueber Cookie-Bannern und klebrigen Kopfzeilen */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(17, 20, 16, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .22s ease;
}
.dyn-fm-overlay[data-offen="1"] { opacity: 1; }

.dyn-fm-dialog {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  background: var(--dyn-fm-bg, #fff);
  color: var(--dyn-fm-text, #24291f);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  padding: 2rem 1.75rem 1.75rem;
  text-align: center;
  font-family: inherit;
  transform: translateY(12px) scale(.97);
  transition: transform .24s cubic-bezier(.2, .8, .3, 1);
}
.dyn-fm-overlay[data-offen="1"] .dyn-fm-dialog { transform: none; }

/* Haken im Kreis. Reine CSS-Form — ein Bild waere eine weitere Datei, die fehlen kann. */
.dyn-fm-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--dyn-fm-akzent-weich, rgba(107, 157, 69, .13));
  display: flex;
  align-items: center;
  justify-content: center;
}
.dyn-fm-icon svg { width: 28px; height: 28px; display: block; }
.dyn-fm-icon path {
  stroke: var(--dyn-fm-akzent, var(--primary, #6b9d45));
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}
.dyn-fm-overlay[data-offen="1"] .dyn-fm-icon path {
  animation: dyn-fm-haken .45s .12s ease forwards;
}
@keyframes dyn-fm-haken { to { stroke-dashoffset: 0; } }

.dyn-fm-titel {
  margin: 0 0 .6rem;
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--dyn-fm-text, #24291f);
}

.dyn-fm-text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--dyn-fm-text-weich, #55604a);
  white-space: pre-line;        /* Absaetze aus dem Backend-Text bleiben erhalten */
}

/* Der abgesetzte Kasten fuer die Abwesenheitsnotiz. Bewusst andere Flaeche, linke Kante
   als Markierung und kleinere Schrift: nachgeordnet, aber nicht zu uebersehen. */
.dyn-fm-hinweis {
  margin: 1.35rem 0 0;
  padding: .85rem 1rem;
  text-align: left;
  background: var(--dyn-fm-hinweis-bg, #fbf7ec);
  border: 1px solid var(--dyn-fm-hinweis-rand, #ecdfc2);
  border-left: 3px solid var(--dyn-fm-hinweis-kante, #d8b558);
  border-radius: 10px;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--dyn-fm-hinweis-text, #5c4f2e);
  white-space: pre-line;
}
.dyn-fm-hinweis-titel {
  display: block;
  margin-bottom: .2rem;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.dyn-fm-schliessen {
  margin-top: 1.6rem;
  width: 100%;
  padding: .8rem 1.25rem;
  border: 0;
  border-radius: 10px;
  background: var(--dyn-fm-akzent, var(--primary, #6b9d45));
  color: var(--dyn-fm-akzent-schrift, #fff);
  font: inherit;
  font-weight: 600;
  font-size: .98rem;
  cursor: pointer;
  transition: filter .15s ease;
}
.dyn-fm-schliessen:hover { filter: brightness(1.07); }
.dyn-fm-schliessen:focus-visible {
  outline: 3px solid var(--dyn-fm-akzent, var(--primary, #6b9d45));
  outline-offset: 2px;
}

/* Kreuz oben rechts — zusaetzlich zum Knopf, weil viele oben rechts suchen. */
.dyn-fm-x {
  position: absolute;
  top: .6rem;
  right: .6rem;
  width: 2.1rem;
  height: 2.1rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--dyn-fm-text-weich, #55604a);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.dyn-fm-x:hover { background: rgba(0, 0, 0, .06); }

.dyn-fm-sperre { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .dyn-fm-overlay,
  .dyn-fm-dialog { transition: none; }
  .dyn-fm-overlay[data-offen="1"] .dyn-fm-icon path { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 420px) {
  .dyn-fm-dialog { padding: 1.65rem 1.25rem 1.35rem; border-radius: 14px; }
  .dyn-fm-titel  { font-size: 1.15rem; }
}