:root {
    --toast-font: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --toast-radius: 8px;
    --toast-shadow: 0 8px 24px rgba(0,0,0,0.15);
    --toast-duration: 0.25s;        /* Ein-/Ausblend-Animation */
    --toast-gap: 10px;
    --toast-max-width: 420px;

    /* Farben je Typ */
    --toast-info-bg: #eef6ff;
    --toast-info-border: #78a5ff;
    --toast-info-fg: #0b4dbd;

    --toast-warn-bg: #fff7e6;
    --toast-warn-border: #f0b429;
    --toast-warn-fg: #7a4a00;

    --toast-error-bg: #ffeef0;
    --toast-error-border: #e5534b;
    --toast-error-fg: #7a1f1b;

    --toast-success-bg: #eafff3;
    --toast-success-border: #33c27f;
    --toast-success-fg: #0b5d3e;
}

/* ------------------------------------------------ Toast ----------------------------------- */
/* Positionierung oben rechts; passe nach Bedarf an (z.B. bottom-left) */
.toast-Container {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -50%); /* verschiebt ihn um die Hälfte seiner eigenen */
    display: flex;
    flex-direction: column;
    gap: var(--toast-gap);
    z-index: 9999;
    pointer-events: none; /* Klicks nur auf die Box selbst */
}

/* Grundstil */
.toast {
    font-family: var(--toast-font);
    max-width: var(--toast-max-width);
    box-shadow: var(--toast-shadow);
    border-radius: var(--toast-radius);
    border: 1px solid;
    padding: 12px 14px 12px 12px;
    display: grid;
    grid-template-columns: 24px 1fr auto;
    grid-template-areas:
        "icon message close";
    align-items: start;
    gap: 10px;
    pointer-events: auto; /* Klicks erlauben */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--toast-duration) ease, transform var(--toast-duration) ease;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast .icon {
    grid-area: icon;
    font-size: 18px;
    line-height: 1;
    margin-top: 2px;
}

.toast .message {
    grid-area: message;
    margin-left:1rem;
}

.toast .close {
    grid-area: close;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    border-radius: 6px;
}
.toast .close:focus-visible {
    outline: 2px solid currentColor;
}

/* Typen */
.toast.info    { background: var(--toast-info-bg);    border-color: var(--toast-info-border);    color: var(--toast-info-fg); }
.toast.warn    { background: var(--toast-warn-bg);    border-color: var(--toast-warn-border);    color: var(--toast-warn-fg); }
.toast.error   { background: var(--toast-error-bg);   border-color: var(--toast-error-border);   color: var(--toast-error-fg); }
.toast.success { background: var(--toast-success-bg); border-color: var(--toast-success-border); color: var(--toast-success-fg); }

/* Ein kleiner Progress-Balken am unteren Rand (optional) */
.toast .progress {
    grid-column: 1 / -1;
    height: 3px;
    background: currentColor;
    opacity: 0.25;
    margin-top: 8px;
    border-radius: 2px;
    transform-origin: left;
    transform: scaleX(1);
    transition: transform linear;
}

/* ====================== Desktop =============================================================================================== */
@media screen and (min-width:1200px) {

    .toast-bullet-point-container {
        margin:0 15px;
    }

}