/* chrisinterface UI-Kit
   Christian Steiner · chrisinterface.com
   Version siehe Datei VERSION.

   MELDUNG — der Toast: kurze Rückmeldung, die nichts blockiert (die Optik;
   das Verhalten steht in toast.js). Die Seite trägt zwei leere Stapel:
       <div class="meldungen-oben"  id="meldungen-oben"></div>
       <div class="meldungen-unten" id="meldungen-unten"></div>
   Vier Arten: .meldung-ok, -hinweis, -warnung, -fehler. Jede Meldung hat
   einen Akzent-Streifen an der linken Kante, eine Blase mit gezeichnetem
   Zeichen und einen Schließen-Knopf.

   Oben rechts wohnt, was von allein geht (ok, hinweis), und die Warnung;
   unten in der Mitte der Fehler — dort schaut man hin. Warnung und Fehler
   bleiben stehen, bis jemand sie wegklickt: Eine Fehlermeldung, die nach
   ein paar Sekunden verschwindet, hat niemand gelesen, der gerade auf die
   Tastatur sah. */

/* ── Die zwei Stapel ── durch sie hindurch bleibt die Seite klickbar; nur
   die Meldung selbst fängt Klicks. */
.meldungen-oben,
.meldungen-unten {
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-10);
    pointer-events: none;
}
.meldungen-oben {
    top: var(--abstand-16);
    right: var(--abstand-16);
    align-items: flex-end;
}
.meldungen-unten {
    bottom: var(--abstand-24);
    left: 50%;
    transform: translateX(-50%);
    align-items: center;
    /* Neueste unten: Der Stapel wächst nach oben weg, die frischeste Meldung
       bleibt an derselben Stelle stehen. */
    flex-direction: column-reverse;
}

/* Feste Breite mit Absicht: Ein Stapel, dessen Kästen je nach Textlänge
   springen, ist unruhig — und man liest ihn im Vorbeigehen. */
.meldung {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    background: var(--flaeche-schwebend);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    padding: var(--abstand-10) var(--abstand-16) var(--abstand-10) 18px;   /* links 18: Streifen (4) plus Innenabstand (14) */
    min-width: 280px;
    max-width: 420px;
    font-size: var(--schrift-sm);
    font-weight: var(--gewicht-mittel);
    color: var(--text);
    box-shadow: var(--schatten-schwebend);
    overflow: hidden;       /* schneidet den Streifen an der Rundung sauber ab */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.meldung.zeigen { opacity: 1; transform: none; }
.meldung.geht   { opacity: 0; transform: translateY(-6px); }

/* Der untere Stapel kommt von unten herein, nicht von oben. */
.meldungen-unten .meldung        { transform: translateY(6px); }
.meldungen-unten .meldung.zeigen { transform: none; }
.meldungen-unten .meldung.geht   { transform: translateY(6px); }

/* ── Der Streifen an der Kante ── man erkennt die Art aus dem Augenwinkel.
   Rechteckig ohne eigene Rundung; die Rundung liefert das overflow: hidden
   der Meldung. */
.meldung::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: var(--text-leise);
}
.meldung-ok::before      { background: var(--ok); }
.meldung-hinweis::before { background: var(--info); }
.meldung-warnung::before { background: var(--warnung); }
.meldung-fehler::before  { background: var(--fehler); }

/* ── Die Blase mit dem Zeichen ── Die Tinte ist eine Rolle (--ok-tinte …)
   und kein festes Weiß, weil sie mit der Welt kippt: hell sind die
   Signalfarben dunkel und tragen helle Schrift, dunkel ist es umgekehrt. */
.meldung-symbol {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.meldung-symbol svg { display: block; }
.meldung-ok      .meldung-symbol { background: var(--ok);             color: var(--ok-tinte); }
.meldung-hinweis .meldung-symbol { background: var(--info);           color: var(--info-tinte); }
.meldung-warnung .meldung-symbol { background: var(--warnung);        color: var(--warnung-tinte); }
.meldung-fehler  .meldung-symbol { background: var(--fehler-flaeche); color: var(--fehler-tinte); }

.meldung-text { flex: 1; line-height: 1.4; overflow-wrap: break-word; }

/* ── Schließen ── Was stehen bleibt, muss man wegbekommen. */
.meldung-zu {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    color: var(--text-leise);
    font-family: inherit;
    font-size: var(--schrift-titel);
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 var(--abstand-4);
    transition: color 0.12s;
}
.meldung-zu:hover { color: var(--text); }