@charset "UTF-8";
/* CSS Document */

/*
====================================
GLOBAL
====================================
*/

body {

    font-family: Arial, sans-serif;
}

/*
====================================
GRID
====================================
*/

.imkerei-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(320px, 1fr));

    gap: 20px;

    margin-top: 20px;
}

/*
====================================
CARD
====================================
*/

.imkerei-card,
.volk-detail-card {

    background: #ffffff;

    border-radius: 14px;

    padding: 20px;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.08);

    border-left: 8px solid #4CAF50;
}

/*
====================================
STATUS COLORS
====================================
*/

.status-stark {

    border-left-color: #2e7d32;
}

.status-normal {

    border-left-color: #1565c0;
}

.status-schwach {

    border-left-color: #ef6c00;
}

.status-varroa {

    border-left-color: #c62828;
}

/*
====================================
KPI
====================================
*/

.kpi-grid {

    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

    margin-bottom: 30px;
}

.kpi-card {

    background: #ffffff;

    border-radius: 14px;

    padding: 25px;

    text-align: center;

    box-shadow:
        0 4px 12px rgba(0,0,0,0.08);
}

.kpi-card h2 {

    font-size: 34px;

    margin: 0;

    color: #2e7d32;
}

.kpi-card p {

    margin-top: 10px;

    color: #666;
}

/*
====================================
BUTTONS
====================================
*/

.quick-buttons {

    margin-top: 20px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;
}

.status-button {

    border: none;

    border-radius: 10px;

    padding: 14px 18px;

    font-size: 16px;

    font-weight: bold;

    color: white;

    cursor: pointer;

    min-width: 120px;
}

.btn-green {

    background: #2e7d32;
}

.btn-blue {

    background: #1565c0;
}

.btn-orange {

    background: #ef6c00;
}

.btn-red {

    background: #c62828;
}

/*
====================================
RANKING
====================================
*/

.ranking-table {

    width: 100%;

    border-collapse: collapse;

    margin-top: 30px;
}

.ranking-table th,
.ranking-table td {

    padding: 14px;

    border-bottom: 1px solid #ddd;

    text-align: left;
}

.ranking-table th {

    background: #2e7d32;

    color: white;
}

/*
====================================
TABLET
====================================
*/

@media screen and (max-width: 768px) {

    .status-button {

        width: 100%;
    }

    .kpi-card h2 {

        font-size: 28px;
    }
}