/* Trainingszonen-Übersicht (zonen/uebersicht.html) */

.zonen-seite { max-width: 720px; margin: 0 auto; }

.zonen-liste { list-style: none; padding: 0; margin: 1.5rem 0; }

.zonen-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.4rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: #fff;
    transition: opacity 0.15s, box-shadow 0.15s, transform 0.3s ease-in-out;
}
.zonen-item--inaktiv { opacity: 0.5; }
.zonen-item.dragging { opacity: 0.3; }
.zonen-item.drag-over { box-shadow: 0 0 0 2px #6c757d inset; }

.zonen-item__griff { cursor: grab; color: #adb5bd; user-select: none; font-size: 1.2rem; }
.zonen-item__farbe {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}
.zonen-item__name { flex: 1; font-weight: 500; }
.zonen-item__code { color: #868e96; margin-left: 0.4rem; font-weight: normal; }
.zonen-item__prioritaet {
    color: #868e96;
    font-variant-numeric: tabular-nums;
    min-width: 2.5rem;
    text-align: right;
}
.zonen-item__pfeile { display: flex; flex-direction: column; gap: 1px; }
.zonen-item__toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    cursor: pointer;
    margin-left: 0.5rem;
}

.zonen-status { color: #495057; font-size: 0.9rem; min-height: 1.2em; font-weight: 500; }

.btn-pfeil {
    line-height: 1;
    padding: 0 0.3rem;
    cursor: pointer;
    background: none;
    border: 1px solid #dee2e6;
    border-radius: 3px;
    color: #495057;
}
.btn-pfeil:hover { background-color: #e9ecef; }

.btn-bearbeiten { text-decoration: none; font-size: 0.9rem; padding: 0 0.25rem; opacity: 0.4; transition: opacity 0.15s; }
.zonen-item:hover .btn-bearbeiten { opacity: 1; }