/* Baustein meldung: Meldungen und Erfolgsleiste (Bedienkonzept, Pilot
   Maschinen, Bauplan 1.3). Besitzer: WP10. Die Grundvorlage bindet die
   Datei nach dem globalen Stylesheet ein. Nur Regeln fuer eigene, neue
   Klassen; Farben als Token mit Rueckfall; eine Regel fuer die
   Telefonbreite (560px).

   Keine Klasse beginnt mit "meldung-": tests/test_meldungen.py liest jede
   .meldung-<x>-Regel aller Stylesheets als Kategorie und verlangt einen
   Absender dafuer. Die Kategorien selbst (error, warning, info, success)
   faerbt weiter vorabsafe.css. Dazu der Dialog der Verlustwarnung
   (static/js/bausteine/verlust.js), der keine eigene CSS-Datei hat. */

/* --- Erfolgsleiste (R34) ------------------------------------------------
   Nur ein reiner Erfolg, nur mit dem Merkmal der Seite (base.html). Unten
   rechts ueber dem Inhalt, unter Seitenleiste und Abdunklung (50/60).
   Sie verschwindet nach etwa sechs Sekunden auch OHNE Skript (Animation
   bis visibility: hidden, dann faengt sie keine Klicks mehr);
   meldung.js nimmt sie danach aus der Seite. Wer mit Maus oder Tastatur
   darin ist, haelt sie an -- noetig ist das nie (keine Hover-Pflicht). */
.erfolgsleiste {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  width: min(420px, calc(100vw - 40px));
  animation: erfolgsleiste-weg 0.4s ease-in 6s forwards;
}
.erfolgsleiste .meldung {
  margin: 0;
  box-shadow: var(--shadow-2, 0 6px 20px rgba(20, 40, 70, 0.12));
}
.erfolgsleiste .meldung + .meldung { margin-top: 8px; }
.erfolgsleiste:hover,
.erfolgsleiste:focus-within { animation-play-state: paused; }

@keyframes erfolgsleiste-weg {
  from { opacity: 1; }
  to { opacity: 0; visibility: hidden; }
}

/* --- Kaesten mit Zeilen (R34) -------------------------------------------
   Die Liste der Einzelfaelle steht vollstaendig da, nie gekuerzt; bei
   vielen Zeilen waechst der Kasten, die Seite scrollt. */
.meldungszeilen {
  margin: 8px 0 0;
  padding-left: 20px;
}
.meldungszeilen li + li { margin-top: 2px; }

/* Ein Kasten mit Ort, den meldung.js an den Anfang seines Abschnitts
   gesetzt hat: dort braucht er Abstand zum Inhalt darunter. Ohne Skript
   bleibt er oben in der Liste der Meldungen. */
[data-meldung-ort] > .meldung { margin: 10px 0; }

/* --- ergebnis_kasten ------------------------------------------------------ */
.ergebnis-kasten { margin: 0 0 16px; }
.ergebnis-titel { margin: 0 0 6px; }
.ergebnis-zahlen {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Dialog der Verlustwarnung (R35) -------------------------------------
   "Speichern und ausfuehren / Verwerfen / Bleiben". Die Knoepfe tragen die
   globalen Klassen knopf-schlicht (dunkel bzw. gefahr); hier steht nur die
   Anordnung. */
.verlust-dialog {
  width: min(520px, calc(100vw - 32px));
  border: none;
  border-radius: var(--radius, 12px);
  padding: 22px 24px;
  color: var(--text, #1c2733);
  background: var(--surface, #fff);
  box-shadow: var(--shadow-2, 0 6px 20px rgba(20, 40, 70, 0.12));
}
.verlust-dialog::backdrop { background: rgba(20, 40, 70, 0.45); }
.verlust-titel {
  margin: 0 0 8px;
  font-size: 19px;
  color: var(--navy, #1F4570);
}
.verlust-fehler {
  color: var(--rot, #b3261e);
  font-weight: 600;
}
.verlust-knoepfe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
/* Das Formular, um das es geht, solange der Dialog offen ist. */
.verlust-markiert {
  outline: 3px solid var(--gold, #D4A648);
  outline-offset: 4px;
  border-radius: 6px;
}

@media (max-width: 560px) {
  /* Telefon: die Leiste geht ueber die volle Breite, am unteren Rand. */
  .erfolgsleiste {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
  }
  .erfolgsleiste .meldung { border-radius: 0; }
  .verlust-dialog { padding: 18px 16px; }
  .verlust-knoepfe { flex-direction: column; }
  .verlust-knoepfe > button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* Kein Ausblenden, nur das Verschwinden nach derselben Zeit. */
  .erfolgsleiste { animation-duration: 0.01s; }
}

@media print {
  .erfolgsleiste { display: none; }
}