/* ===========================================
   SECTION SWITCHER - Umschalten zwischen Sektionen
   =========================================== */

.section-switcher {
    position: relative;
    margin: 0 12px 0 16px; /* rechts Luft: sonst stiess der rote Punkt an den Band-Umschalter */
}

.section-switcher-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, var(--gray-100) 0%, var(--gray-200) 100%);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif; position: relative; /* Bezug fuer den Eck-Punkt (.section-switcher-dot) */
}

.section-switcher-toggle:hover {
    background: linear-gradient(135deg, var(--gray-200) 0%, var(--gray-300) 100%);
    border-color: var(--gray-400);
}

.current-section-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

.section-switcher .dropdown-arrow {
    font-size: 10px;
    color: var(--primary-color);
    transition: transform 0.2s ease;
}

.section-switcher.active .dropdown-arrow {
    transform: rotate(180deg);
}

.section-switcher-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 240px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    padding: 8px 0;
    z-index: 1002;
    display: none;
}

.section-switcher.active .section-switcher-menu {
    display: block;
}

.section-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    text-decoration: none;
    transition: background-color 0.15s ease;
    color: var(--gray-800);
}

.section-item:hover {
    background: var(--light-gray);
}

.section-item.active {
    background: var(--gray-100);
}

.section-item.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.section-item.disabled:hover {
    background: transparent;
}

.section-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

.icon-band {
    background-color: var(--primary-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E") center/contain no-repeat;
}

.icon-community {
    background-color: var(--success-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center/contain no-repeat;
}

.icon-production {
    background-color: var(--warning-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='2' y='3' width='20' height='14' rx='2' ry='2'/%3E%3Cline x1='8' y1='21' x2='16' y2='21'/%3E%3Cline x1='12' y1='17' x2='12' y2='21'/%3E%3C/svg%3E") center/contain no-repeat;
}

.icon-dashboard {
    background-color: var(--text-color);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E") center/contain no-repeat;
}

.section-item-name {
    font-size: 14px;
    font-weight: 500;
}

.section-check {
    margin-left: auto;
    color: var(--primary-color);
    font-weight: 600;
}

/* Zahl-Badge pro Bereich im aufgeklappten Menue (mirror .nav-badge-desktop) */
.section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 8px;
    padding: 0 5px;
    background: var(--error-color);
    color: var(--text-on-color);
    font-size: 11px;
    font-weight: 600;
    line-height: 1; font-variant-numeric: tabular-nums; /* Spiegel von .nav-badge-desktop */
    border-radius: 9px;
    flex-shrink: 0;
}

.section-badge.large {
    min-width: 22px;
    padding: 0 6px;
}

/* Aggregat-Punkt auf dem zugeklappten Umschalt-Knopf: "irgendwo ist was Neues" */
.section-switcher-dot {
    width: 8px; position: absolute; top: -3px; right: -3px; /* Ecke statt Fluss: per JS nach dem ersten Malen eingeblendet, machte er den Knopf 16px breiter und schob die Navi */
    height: 8px;
    border-radius: 50%;
    background: var(--error-color);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .section-switcher {
        order: -1;
        margin-left: 8px;
        margin-right: auto;
        padding-right: 10px; /* margin-right:auto wird bei vollem Header zu 0 */
    }
    
    .section-switcher-toggle {
        padding: 6px 10px;
    }
    
    .current-section-name {
        display: none;
    }
    
    .section-switcher-toggle .section-icon {
        margin-right: 0;
    }
}