/* components/home.css
   Styles für die Startseite (home.html)
*/

/* Dashboard-Karten-Grid */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

/* Einzelne Dashboard-Karte */
.dashboard-card {
    padding: 2rem;
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.dashboard-card h3 {
    margin-bottom: 0.75rem;
}

.dashboard-card p {
    margin-bottom: 1rem;
    color: var(--color-text-muted);
}

/* Karten-Farbvarianten */
.dashboard-card--blue   { background: #e3f2fd; }
.dashboard-card--green  { background: #e8f5e9; }
.dashboard-card--red    { background: #fff0f0; }
.dashboard-card--purple { background: #f0e6ff; }
.dashboard-card--yellow { background: #fff3cd; }

/* Info-Box (z.B. API-Endpoints) */
.info-box {
    margin-top: 2rem;
    background: #fff3cd;
    padding: 1.5rem;
    border-radius: var(--radius-md);
}

.info-box h3 {
    margin-bottom: 0.75rem;
}

.info-box ul {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
}

.info-box li {
    margin-bottom: 0.4rem;
}

/* Lerner-Willkommensbox */
.learner-info-box {
    background: #e8f5e9;
    padding: 2rem;
    border-radius: var(--radius-md);
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}