/* Root-Container Positionierung */
.tg-root{ position:fixed; inset:0; pointer-events:none; z-index:99999; padding:16px; }
.tg-top{ align-items:flex-start; }
.tg-bottom{ align-items:flex-end; }
.tg-center{ display:flex; justify-content:center; }
.tg-left{  display:flex; justify-content:flex-start; }
.tg-right{ display:flex; justify-content:flex-end; }

/* Toast-Karte */
.tg-toast{
    pointer-events:auto;
    width:min(520px, calc(100vw - 32px));
    background: rgba(17,24,39,.55);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    border-radius:16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    position:relative;
    overflow:hidden;
    margin:10px;
    transform: translateY(10px);
    opacity:.0;
}
.tg-in{ animation: tgIn .36s ease forwards; }
.tg-out{ animation: tgOut .28s ease forwards; }

@keyframes tgIn  { to { opacity:1; transform: translateY(0);} }
@keyframes tgOut { to { opacity:0; transform: translateY(8px);} }

/* Akzent links */
.tg-stripe{
    position:absolute; left:10px; top:10px; bottom:10px; width:3px; border-radius:2px; opacity:.95;
}

/* Grid-Layout */
.tg-grid{
    display:grid;
    grid-template-columns: 48px 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
    "icon head close"
    "icon domain close"
    "icon msg   close";
    gap:12px 16px;
    padding:16px 18px 18px 18px;
}

/* Icon */
.tg-icon{
    grid-area: icon;
    width:48px; height:48px;
    display:grid; place-items:center;
    border-radius:12px;
    background: rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.06);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.tg-spin{ animation: tgSpin 1s linear infinite; }
@keyframes tgSpin{ to { transform: rotate(360deg);} }

/* Header */
.tg-head{ grid-area: head; display:flex; align-items:center; gap:10px; color:#e5e7eb; }
.tg-badge{
    display:inline-flex; align-items:center; gap:.25rem;
    font-size:11px; font-weight:700; letter-spacing:.6px;
    padding:5px 8px; border-radius:999px;
    background: rgba(31,41,55,.55);
    border:1px solid rgba(255,255,255,.12);
    color:#d1d5db;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 14px rgba(0,0,0,.25);
}
.tg-title{ font-size:18px; letter-spacing:.2px; font-weight:800; }

/* Domain + Message */
.tg-domain{ grid-area: domain; font-size:20px; font-weight:800; color:#e5e7eb; }
.tg-msg   { grid-area: msg;    font-size:14px; color:#cbd5e1; }

/* Close */
.tg-close{
    grid-area: close;
    align-self:start;
    background: rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;
    padding:6px; display:grid; place-items:center;
    box-shadow: 0 0 10px rgba(0,0,0,.25);
}
.tg-close:hover{ background: rgba(255,255,255,.12); }
.tg-close.tg-spacer{ opacity:0; pointer-events:none; }

/* Kleine Status-Akzent-Farbton-Anpassung im Iconrahmen */
.tg-toast.tg-update .tg-icon{ border-color: rgba(6,182,212,.25); }
.tg-toast.tg-success .tg-icon{ border-color: rgba(34,197,94,.25); }
.tg-toast.tg-warning .tg-icon{ border-color: rgba(245,158,11,.25); }
.tg-toast.tg-error   .tg-icon{ border-color: rgba(239,68,68,.25); }

/* Startzustand */
.tg-card {
    opacity: 0;
    transform: translateY(8px);
    will-change: opacity, transform;
}

/* Einblenden */
.tg-card.tg-in {
    animation: tgIn .28s ease-out forwards;
}

/* Ausblenden */
.tg-card.tg-out {
    animation: tgOut .28s ease-in forwards;
}

/* Keyframes */
@keyframes tgIn {
    from { opacity: 0; transform: translateY(8px) }
    to   { opacity: 1; transform: translateY(0) }
}
@keyframes tgOut {
    from { opacity: 1; transform: translateY(0) }
    to   { opacity: 0; transform: translateY(8px) }
}

.notification-badge {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .5px;
    padding: 3px 7px;
    border-radius: 6px;
    background: rgba(255,255,255,.08);
    color: #cbd5e1;
}

.notification-container .text-base {
    margin-top: 1px; /* etwas optische Höhe ausgleichen */
}