/* ============================================================================
   messages.css — die EINE Darstellung fuer Django-Messages (T13, ADR-0020)

   Vorher gab es zwei historisch gewachsene Varianten derselben Sache:
     - base.css Sektion 1: .messages-container (fixed Overlay, Rahmen rundum,
       fadeIn mit translateY) — auf allen base.html-Seiten
     - startpage.css:      .messages (in-flow, border-left 4px, slideDown)
       — nur auf der Standalone-Startseite (index.html)
   Ziel-Optik ist der Toast; die in-flow-Variante der Startseite ist entfallen.
   Diese Datei wird von base.html UND index.html geladen (Muster ADR-0015:
   eine gemeinsame Datei, ein Owner pro Concern), jeweils an der Position, an
   der vorher die Sektion/der Block lag -> Kaskade gegenueber dem Seiten-CSS
   unveraendert.

   NAMENSRAUM (wichtig): die Keyframes heissen ds-message-in/-out und die
   Ausblende-Klasse ist .message.is-hiding. Grund: die generischen Namen
   fadeIn/fadeOut/.fade-out sind auf mehreren Seiten anderweitig belegt
   (startpage.css .modal, archive_main.css/subtopics.css .tiles + Tabelle,
   locator per JS gesetzt). Keyframes sind dokumentweit global — der frueher
   generische Name wurde auf diesen Seiten von der jeweiligen Seiten-CSS
   ueberschrieben und die Toasts liefen mit der falschen Animation (dieselbe
   Falle wie die 07/2026 behobene databuddies-Kollision). Mit eigenem
   Namensraum kann das nicht mehr passieren -> NICHT umbenennen.

   Farben ueber die kanonischen Status-Tokens (ADR-0016).
   ============================================================================ */

.messages-container {
   position: fixed;
   top: 20px;
   left: 50%;
   transform: translateX(-50%);
   z-index: 1000;
   width: 80%;
   max-width: 600px;
}

.message {
   padding: 15px 20px;
   margin-bottom: 10px;
   border-radius: 5px;
   box-shadow: 0 3px 6px rgba(0,0,0,0.16);
   text-align: center;
   animation: ds-message-in 0.5s;
}

.message.success {
   background-color: var(--ds-success-bg);
   color: var(--ds-success-text);
   border: 1px solid var(--ds-success-border);
}

.message.info {
   background-color: var(--ds-info-bg);
   color: var(--ds-info-text);
   border: 1px solid var(--ds-info-border);
}

.message.warning {
   background-color: var(--ds-warning-bg);
   color: var(--ds-warning-text);
   border: 1px solid var(--ds-warning-border);
}

.message.error {
   background-color: var(--ds-error-bg);
   color: var(--ds-error-text);
   border: 1px solid var(--ds-error-border);
}

/* Ausblenden der Erfolgsmeldungen (gesetzt von core/js/messages.js). */
.message.is-hiding {
   animation: ds-message-out 0.5s forwards;
}

@keyframes ds-message-in {
   from { opacity: 0; transform: translateY(-20px); }
   to { opacity: 1; transform: translateY(0); }
}

@keyframes ds-message-out {
   from { opacity: 1; transform: translateY(0); }
   to { opacity: 0; transform: translateY(-20px); }
}