.task-avatar {
    border-radius: 28px;
    border: 10px black;
    color: gray;
    background: #D3E2FF;
    width: 25px;
    text-align: center;
    height: 25px;
}


.task span{

    font-size:34px;

    font-weight:700;

    color:#111827;
}

.task-icon{

    width:58px;
    height:58px;

    padding:14px;

    background:#f5f7fb;

    border-radius:50%;

    object-fit:contain;
}


/* ===========================
   Tabellenkopf
=========================== */

.task-overview-bar{

    display:grid;

    grid-template-columns:
        300px
        150px
        120px
        150px
        120px;

    align-items:center;

    background:#fff;

    margin-top:30px;

    padding:18px 24px;

    border:1px solid #eef2f7;

    border-radius:14px 14px 0 0;

    font-size:14px;

    font-weight:600;

    color:#667085;
}


/* ===========================
   Tabellenzeile
=========================== */

.task-card{

    display:grid;

    grid-template-columns:
            300px
        150px
        120px
        150px
        120px
    120px;

    align-items:center;

    padding:18px 24px;

    background:#fff;

    border-left:1px solid #eef2f7;
    border-right:1px solid #eef2f7;
    border-bottom:1px solid #eef2f7;

    transition:.2s;
}

.task-card:hover{

    background:#fafcff;
}


/* ===========================
   Texte
=========================== */

.task-card h3{

    margin:0;

    font-size:15px;

    font-weight:600;

    color:#101828;
}

.task-card p{

    margin:0;

    font-size:14px;

    color:#475467;
}


/* ===========================
   Aktionen
=========================== */

.task-actions{

    display:flex;

    justify-content:flex-end;

    gap:10px;
}

.task-action-btn-edit,
.task-action-btn-property,
.task-action-btn-delete{

    width:34px;
    height:34px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:transparent;

    border:none;

    cursor:pointer;

    transition:.2s;
    margin-left: 20px;
}

.task-action-btn-edit:hover,
.task-action-btn-property:hover,
.task-action-btn-delete:hover{

    transform:scale(1.15);
}

.btn-icon{

    width:18px;
    height:18px;

    object-fit:contain;
}


/* PRIO */

.priority-high,
.priority-medium,
.priority-low{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:fit-content;
    padding:6px 12px;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}

.priority-high{
    background:#FEE2E2;
    color:#B91C1C;
    border:1px solid #FECACA;
}

.priority-medium{
    background:#FEF3C7;
    color:#B45309;
    border:1px solid #FDE68A;
}

.priority-low{
    background:#DCFCE7;
    color:#15803D;
    border:1px solid #BBF7D0;
}

/* ===========================
   Kopfzeile
=========================== */

.task-overview-item h3{

    margin:0;

    font-size:14px;

    font-weight:600;

    color:#667085;
}

.tasks{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    margin-top:30px;
}

.task{
    display:flex;
    align-items:center;
    gap:18px;

    background:#fff;

    padding:25px;

    border-radius:14px;

    border:1px solid #eef2f7;

    box-shadow:
            0 1px 2px rgba(16,24,40,.04),
            0 12px 32px rgba(16,24,40,.06);
}

.task h3 {
    margin:0;

    font-size:14px;

    font-weight:500;

    color:#667085;
}

.task-title{
    display:flex;

    flex-direction:column;

    gap:5px;

    flex:1;
}

.task-icon{

    width:58px;
    height:58px;

    padding:14px;

    background:#f5f7fb;

    border-radius:50%;

    object-fit:contain;
}

.task h3{

    margin:0;

    font-size:14px;

    font-weight:500;

    color:#667085;
}

.task span{

    font-size:34px;

    font-weight:700;

    color:#111827;
}

.property-task{

    display:flex;

    align-items:center;

    gap:15px;

    width:100%;

    padding:14px 16px;

    background:#fff;

    border:1px solid #eef2f7;

    border-radius:12px;

    margin-bottom:10px;

    transition:.2s;

}

.property-task:hover{

    background:#fafcff;

    border-color:#dfe7f2;

}


/* Icon */

.property-task-icon{

    width:40px;

    height:40px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:10px;

    background:#f5f7fb;

    color:#64748b;

    font-size:18px;

    font-weight:700;

}


/* Aufgabe */

.property-task-content{

    display:flex;

    flex-direction:column;

    gap:4px;

    flex:1;

    min-width:0;

}

.property-task-content strong{

    font-size:14px;

    font-weight:600;

    color:#101828;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

}

.property-task-content span{

    font-size:12px;

    color:#667085;

}


/* Rechte Informationen */

.property-task-meta{

    display:flex;

    align-items:center;

    gap:18px;

    flex-shrink:0;

}

.property-task-meta small{

    color:#667085;

    font-size:12px;

    white-space:nowrap;

}


/* Prioritäten */

.property-task-meta > span{

    padding:5px 10px;

    border-radius:7px;

    font-size:12px;

    font-weight:600;

    white-space:nowrap;

}

.property-task-meta .priority-high{

    color:#b42318;

    background:#fef3f2;

}

.property-task-meta .priority-medium{

    color:#b54708;

    background:#fffaeb;

}

.property-task-meta .priority-low{

    color:#027a48;

    background:#ecfdf3;

}


/* Button */

.property-task-action{

    flex-shrink:0;

}

.property-task-action button{

    width:34px;

    height:34px;

    border:none;

    background:transparent;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    border-radius:8px;

}

.property-task-action button:hover{

    background:#f5f7fb;

}