/* ============================================================
   ProKASRO Suite — UI-Kit: Meldung (Toast)
   Die Optik kommt seit V-6 (05.08.2026) aus dem Haus-Baustein. Diese Datei
   traegt nur noch den Marker-Block — Suite-eigenes gibt es hier nichts mehr.
   Das VERHALTEN (wie lange, wo, wie viele) steht in js/toast.js; die Regeln
   dazu im Kopf des Bausteins.
   ============================================================ */

/* ══ HAUS-BAUSTEIN: meldung ══ Quelle: Material/design/bausteine/meldung.css
   HIER NIE EDITIEREN — der nächste Werkstatt-Sync überschreibt es,
   und zwar in ALLEN Dächern gleichzeitig. */
/* ══ MELDUNG ══ der Toast: kurze Rückmeldung, die nichts blockiert
   Gemeinsam seit V-6 (05.08.2026). Entschieden an der meldungskarte.html.

   DIE WICHTIGSTE ENTSCHEIDUNG DIESER ETAPPE IST NICHT OPTISCH. Im Büro
   verschwand eine FEHLERmeldung nach 2,6 Sekunden — genau wie „gespeichert".
   Wer in dem Moment auf die Tastatur sah, erfuhr nie, dass das Speichern
   fehlgeschlagen war. Chris am 05.08.2026: „auf jeden fall ja, das ist mir
   die ganze Zeit schon aufgefallen."

   BESCHLOSSEN:
     A  WARNUNG UND FEHLER BLEIBEN STEHEN, bis jemand sie wegklickt. Erfolg
        und Hinweis gehen nach 4 s von allein. Der Fehler wandert dabei nach
        UNTEN IN DIE MITTE — er soll nicht am Rand stehen, wo die
        Erfolgsmeldungen wohnen.
     B  SCHLIESSEN-KNOPF an jeder Meldung. Was bleibt, muss man wegbekommen.
     C  AKZENT-STREIFEN an der linken Kante, zusätzlich zur farbigen Blase.
        Man erkennt die Art aus dem Augenwinkel, ohne hinzusehen. Das ist die
        sichtbarste Änderung für die Büro-Tools.
     D  DIE ZEICHEN BLEIBEN GEZEICHNET (SVG), nicht getippt. Ein ✓ als
        Schriftzeichen sieht in jeder Schrift anders aus und kann als
        Ersatzglyph landen; die gezeichnete Form nicht. Die einzige Zeile, in
        der das Büro gewonnen hat.
     E  HÖCHSTENS VIER oben gleichzeitig.

   WIE DER STAPEL VOLL WIRD: Weil Warnungen jetzt bleiben, kann der obere
   Stapel volllaufen. Die Regel dafür steht im JavaScript, nicht hier: Es
   weicht immer zuerst die ÄLTESTE, die ohnehin von allein gegangen wäre.
   Erst wenn nur noch bleibende dastehen, weicht die älteste bleibende. Bei
   einem Import mit zwanzig Warnungen wäre eine Sammelmeldung besser als
   zwanzig einzelne — das ist ein eigenes Thema.

   DER GRUND IST EINE ROLLE, KEIN WERT. `--flaeche-schwebend` löst jedes Dach
   selbst auf: Büro hell #ffffff, Büro dunkel #1c232e, Suite #222B3C. Chris
   hat alle drei am Bild gesehen — „in hell und dunkel sind die beiden
   optimal". Genau dafür sind Rollen da; im Rollen-Wächter steht die
   Abweichung mit Grund.

   DIE TINTE IN DER BLASE MUSSTE ERST EINE ROLLE WERDEN. Im Büro stand dort
   ein hartes `#fff`. Das geht in einem geteilten Baustein nicht, denn die
   Tinte muss mit der Welt KIPPEN: Hell sind die Signalfarben dunkel (weiße
   Schrift), dunkel sind sie hell (dunkle Schrift). Die Werkstatt führte nur
   die dunklen Tinten; die hellen sind mit V-6 dazugekommen. */

/* ── Die zwei Stapel ────────────────────────────────────────────────────
   Oben rechts wohnt, was von allein geht (und die bleibenden Warnungen).
   Unten in der Mitte wohnt der Fehler — dort schaut man hin. */
.meldungen-oben,
.meldungen-unten {
    position: fixed;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-10);
    pointer-events: none;   /* durch den Stapel hindurch klickbar … */
}
.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;
}

.meldung {
    position: relative;
    pointer-events: auto;   /* … nur die Meldung selbst fängt Klicks */
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    background: var(--flaeche-schwebend);
    border: 1px solid var(--linie);
    border-radius: var(--rundung-mittel);
    /* links mehr, weil dort der Streifen sitzt */
    padding: var(--abstand-10) var(--abstand-16) var(--abstand-10) 18px;   /* haus-ausnahme: die 18px sind Streifenbreite (4) plus der normale Innenabstand (14) — Geometrie dieses Bauteils, keine Abstands-Entscheidung */
    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;       /* damit der Streifen an der Rundung sauber abschneidet */
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
/* Feste Breite ist Absicht: Ein Stapel, dessen Kästen je nach Textlänge
   springen, ist unruhig — und man liest ihn im Vorbeigehen. */

.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 ──────────────────────────────────────────
   Rechteckig, ohne eigene Rundung — die schneidet das `overflow: hidden`
   der Meldung sauber ab. */
.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 ─────────────────────────────────────────── */
.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 ──────────────────────────────────────────────────────────
   Gehört zu A: 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); }
/* ══ HAUS-BAUSTEIN: meldung ENDE ══ */