/* ==========================================================
   AusbildungsManager
   Design System v1.0
   ========================================================== */

/* ---------- Grundlayout ---------- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Inter", sans-serif;
    color: #1e293b;
    background:
        radial-gradient(circle at top,
            #dbeafe 0%,
            #eef2ff 35%,
            #f8fafc 100%);
}

/* ---------- Glass ---------- */

.glass {

    background: rgba(255,255,255,.72);

    backdrop-filter: blur(18px);

    -webkit-backdrop-filter: blur(18px);

    border: 1px solid rgba(255,255,255,.45);

    box-shadow:
        0 10px 40px rgba(15,23,42,.08);

}

/* ---------- Cards ---------- */

.card{

    border-radius:24px;

    transition:.2s;

}

.card-hover:hover{

    transform:translateY(-4px);

    box-shadow:
        0 18px 45px rgba(15,23,42,.10);

}

/* ---------- Buttons ---------- */

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:.6rem;

    padding:.85rem 1.5rem;

    border-radius:16px;

    font-weight:600;

    transition:.18s;

}

.btn-primary{

    background:#4f46e5;

    color:white;

}

.btn-primary:hover{

    background:#4338ca;

}

.btn-secondary{

    background:white;

    color:#334155;

}

.btn-secondary:hover{

    background:#f8fafc;

}

.btn-danger{

    background:#ef4444;

    color:white;

}

.btn-danger:hover{

    background:#dc2626;

}

/* ---------- Inputs ---------- */

.input{

    width:100%;

    padding:1rem 1.2rem;

    border-radius:18px;

    border:none;

    background:white;

    outline:none;

    transition:.15s;

}

.input:focus{

    box-shadow:

        0 0 0 3px rgba(79,70,229,.18);

}

/* ---------- Status ---------- */

.status-red{

    background:#ef4444;

}

.status-yellow{

    background:#facc15;

}

.status-green{

    background:#22c55e;

}

/* ---------- Badges ---------- */

.badge{

    display:inline-flex;

    align-items:center;

    gap:.4rem;

    padding:.35rem .8rem;

    border-radius:999px;

    font-size:.8rem;

    font-weight:600;

}

.badge-red{

    color:#991b1b;

    background:#fee2e2;

}

.badge-yellow{

    color:#92400e;

    background:#fef3c7;

}

.badge-green{

    color:#166534;

    background:#dcfce7;

}

/* ---------- Progress ---------- */

.progress{

    width:100%;

    height:12px;

    background:#e2e8f0;

    border-radius:999px;

    overflow:hidden;

}

.progress-bar{

    height:100%;

    background:#4f46e5;

    border-radius:999px;

    transition:.35s;

}

/* ---------- Sidebar ---------- */

.sidebar-link{

    display:flex;

    align-items:center;

    gap:.9rem;

    padding:1rem;

    border-radius:18px;

    color:#475569;

    font-weight:600;

    transition:.18s;

}

.sidebar-link:hover{

    background:#eef2ff;

    color:#4338ca;

}

.sidebar-active{

    background:#4f46e5;

    color:white;

}

/* ---------- Animation ---------- */

.fade-in{

    animation:fade .25s ease;

}

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(8px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

/* ---------- Scrollbar ---------- */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-thumb{

    background:#cbd5e1;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:#94a3b8;

}

/* ---------- Responsive ---------- */

@media (max-width:1024px){

    .glass{

        border-radius:22px;

    }

}

/* ---------- Kategorie-Farbtöne (Ausbildungskarte) ---------- */
/* Überschreiben gezielt den Hintergrund von .glass, Blur/Rand bleiben erhalten */

.category-red{
    background: rgba(254,242,242,.78);
}

.category-orange{
    background: rgba(255,247,237,.78);
}

.category-yellow{
    background: rgba(255,251,235,.78);
}

.category-green{
    background: rgba(240,253,244,.78);
}

.category-teal{
    background: rgba(240,253,250,.78);
}

.category-blue{
    background: rgba(239,246,255,.78);
}

.category-indigo{
    background: rgba(238,242,255,.78);
}

.category-pink{
    background: rgba(253,242,248,.78);
}

.category-slate{
    background: rgba(248,250,252,.78);
}