/*
 * Seezeit · Meldungen und Meldungsfenster (Paket 1.3, Hinweiskästen Paket 1.5b).
 *
 * Quellen: BRIEF.md 3 (Meldungen: Fehler in Rot #b02228, alles andere neutral; Hinweise dürfen nie wie Eingabefelder aussehen),
 * KOMPONENTEN.md 7 (Dialog). Die Farben liefert die erzeugte Variante; hier stehen Form, Abstände und Schrift.
 * Die Fehlermeldung an der Frage (.ls-question-mandatory, input-error) gehört zu Paket 1.4.
 */

/* ========================================================================== Meldungen im Text (.alert) */
.alert {
  padding: var(--kern-space-12) var(--kern-space-16);
  font-size: var(--kern-font-size-16);
  line-height: 1.5;
  border-width: 1px;
  border-radius: var(--kern-radius-l);
}
.alert-dismissible {
  padding-right: var(--kern-space-48);
}
/* Die Meldung "gespeichert" auf der Seite (Theme-Option "Show popups" = "On page", views/subviews/messages/justsaved.twig) trägt die Klassen
   "fade in" aus Bootstrap 3. In Bootstrap 5 blendet ".fade:not(.show)" sie auf Deckkraft 0 aus: Die Meldung stand im Dokument, war
   aber unsichtbar (gemessen in 1.5c am Seezeit-Theme; die Regel ".fade:not(.show)" steht im Bootstrap des Elternthemes). "in" ist hier das
   Zeichen für "sichtbar". Das Schließen-Kreuz funktioniert weiter (Bootstrap entfernt das Element nach dem Übergang). Paket 1.5c. */
.alert.fade.in:not(.show) {
  opacity: 1;
}
/* Info- und Hinweiskästen (Paket 1.5b, Rückmeldung vom 04.10.; BRIEF.md 3, Meldungen): alle Kästen außer dem Fehler (.alert-info,
   -warning, -success und die übrigen Varianten; Erfolg, Warnung und Info sind vorerst neutral). Die Variante des Elterntheme malt sie
   weiß mit feiner Kontur; das ist die Fläche eines Eingabefelds (der Hinweis über dem Zugangscode-Feld sah aus wie ein deaktiviertes
   Feld, ebenso der Anonymitätshinweis über den Feldern der Seite zum Zwischenspeichern). Eine weiße Fläche mit Kontur ist
   Eingabefeldern vorbehalten. Ein Hinweiskasten hat deshalb eine leicht getönte Fläche (Neutral-050, wie Zebrastreifen und stille
   Fläche) ohne sichtbare Kontur, ein Info-Symbol (Remix Icon information-fill, "\ee58") und dunkelblauen Text. Der Rand bleibt als
   durchsichtiger 1-px-Rand stehen: Im Windows-Kontrastmodus, der Hintergründe ersetzt, bleibt der Kasten so als Fläche erkennbar.
   Das Symbol ist Schmuck (leerer Alternativtext), der Text trägt die Aussage. Gilt auch für den Kasten auf einer getönten Fläche
   (die Karte ist weiß, der Sand beige): Neutral-050 hebt sich auf beiden ab. */
.alert:not(.alert-danger) {
  position: relative;
  padding-left: calc(var(--kern-space-16) + 1.25rem + var(--kern-space-8));
  color: var(--kern-color-layout-text-default);
  background-color: var(--kern-color-neutral-050);
  border: 1px solid transparent;
}
.alert:not(.alert-danger)::before {
  content: "\ee58";
  content: "\ee58" / "";
  position: absolute;
  top: var(--kern-space-12);
  left: var(--kern-space-16);
  font-family: "remixicon";
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}
/* Fehlermeldung (.alert-danger: Zusammenfassung oben bei der Theme-Option "On page", Fehlerliste der Seiten zum Speichern, Laden und
   für den Zugangscode, Hinweis ohne JavaScript): Rot, Gewicht 600 und ein Symbol vor dem Text, damit sie auch ohne Farbwahrnehmung
   als Fehler erkennbar ist (BRIEF.md 3, Pflicht und Fehler; Kriterium 7). Dasselbe Symbol wie an der Frage (Remix Icon
   error-warning-fill, "\eca0"); die Schrift lädt das Elterntheme für die Fragen mit. Paket 1.5. */
.alert-danger {
  position: relative;
  padding-left: calc(var(--kern-space-16) + 1.25rem + var(--kern-space-8));
  font-weight: 600;
}
.alert-danger::before {
  content: "\eca0";
  position: absolute;
  top: var(--kern-space-12);
  left: var(--kern-space-16);
  font-family: "remixicon";
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}

/* ========================================================================== Meldungsfenster (Pflichtfehler, Speichern, Löschen) */
/* Bootstrap-Modal des Elternthemes (#bootstrap-alert-box-modal, #clear-all-modal): höchstens 34 rem breit, Radius 4 px,
   Schatten der Ebene +2, Hintergrund abgedunkelt (KERN-Wert 72 %). Die senkrechte Mitte erzeugt das Elterntheme mit
   ".modal:before" (Höhe 100 %) und ".modal-dialog { display: inline-block }"; das bleibt. Auf Handys setzt es den
   Dialog fest an den Rand (position: fixed, 96 % Breite, links bündig); hier steht er wieder im Fluss, mittig. */
.modal-dialog {
  position: relative;
  width: calc(100% - 2 * var(--kern-space-16));
  max-width: 34rem;
  margin: 0;
  padding: 0;
}
.modal-content {
  background-color: var(--color-surface-active);
  border: 0;
  border-radius: var(--kern-radius-l);
  box-shadow: var(--kern-shadow-dialog);
}
.modal-backdrop.show {
  opacity: 0.72;
}
.modal-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kern-space-16);
  padding: var(--kern-space-24) var(--kern-space-24) 0;
}
/* im Markup steht das Kreuz vor dem Titel; sichtbar steht der Titel links und das Kreuz rechts */
.modal-title {
  flex: 1 1 auto;
  order: 1;
  margin: 0;
  font-size: var(--kern-font-size-21);
  font-weight: 800;
  line-height: 1.25;
}
.modal-body {
  padding: var(--kern-space-16) var(--kern-space-24);
  font-size: var(--kern-font-size-16);
  line-height: 1.5;
}
.modal-footer {
  gap: var(--kern-space-12);
  padding: 0 var(--kern-space-24) var(--kern-space-24);
}
.modal-footer > * {
  margin: 0;
}
/* Schließen-Kreuz: runder 44-px-Knopf (KNOEPFE.md, Icon rund). Das Kreuz ist das Bild des Elternthemes. */
.modal-header .btn-close {
  flex: none;
  order: 2;
  width: 44px;
  height: 44px;
  margin: 0 0 0 auto;
  padding: 0;
  background-color: var(--kern-color-neutral-050);
  background-size: 1rem auto;
  border-radius: 50%;
  opacity: 1;
}
.modal-header .btn-close:hover {
  background-color: var(--kern-color-neutral-100);
}
.modal-header .btn-close:active {
  background-color: var(--kern-color-neutral-200);
}