/* ==========================================================================
   Dashboard-Kacheln (Gruppen und Buttons) - Bereinigte Variante 3
   ========================================================================== */

.dashboard-box {
    margin: 10px;
    min-width: 220px;
    max-width: 280px;
    width: auto;
    min-height: 200px;
    padding: 15px;
    box-sizing: border-box;
    text-align: center;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    
    /* 10px breiter Farbstreifen links */
    border-left: 10px solid #f8f9fa; 
    
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    &:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    }

    h3 {
        margin-top: 0;
        margin-bottom: 15px;
        font-size: 1.05rem;
        color: #333333;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        padding-bottom: 5px;
        text-align: left;
    }

    .box-content {
        display: flex;
        flex-direction: column;
        gap: 8px;

        /* Neues, kollisionsfreies Button-Styling (btn-tile) */
        .btn-tile {
            display: block;
            width: 100%;
            padding: 8px;
            border-radius: 4px;
            border: none;
            text-decoration: none;
            color: #212529;
            background-color: #dddedf; /* Ihr Wunsch-Grauton */
            font-weight: bold;
            font-size: 13px;
            text-align: center;
            cursor: pointer;
            transition: all 0.2s ease;
        }
    }
}

/* ==========================================================================
   Farbstreifen & Hover-Farbwechsel (Vollständig ohne !important-Hacks!)
   ========================================================================== */

.box-1 { 
    border-left-color: #bebebe; 
    .btn-tile:hover { color: #ffffff; background-color: #bebebe; } 
}
.box-2 { 
    border-left-color: #ffd39b; 
    .btn-tile:hover { color: #ffffff; background-color: #ffd39b; } 
}
.box-3 { 
    border-left-color: #97ffff; 
    .btn-tile:hover { color: #333333; background-color: #97ffff; } 
}
.box-4 { 
    border-left-color: #6b8e23; 
    .btn-tile:hover { color: #ffffff; background-color: #6b8e23; } 
}
.box-5 { 
    border-left-color: #eeb4b4; 
    .btn-tile:hover { color: #333333; background-color: #eeb4b4; } 
}
.box-6 { 
    border-left-color: #ffff00; 
    .btn-tile:hover { color: #ffffff; background-color: #ffff00; } 
}
.box-7 { 
    border-left-color: #00c5cd; 
    .btn-tile:hover { color: #ffffff; background-color: #00c5cd; } 
}
.box-8 { 
    border-left-color: #deb887; 
    .btn-tile:hover { color: #ffffff; background-color: #deb887; } 
}

.box-default { 
    border-left-color: #ced4da; 
    .btn-tile:hover { color: #ffffff; background-color: #ced4da; } 
}