body.hauptverwaltung {

    /* ==================
       AREA-2+: Staff accordion sections
    ================== */

    .main-screen.grey {
        padding: 0;
        border-bottom: 1px solid #e0e0e0;
    }

    /* White card container wrapping accordion content */
    .main-screen.grey .container > div > .row {
        background: var(--clr-primary-white);
        border-radius: var(--br-primary);
        padding: var(--p-500);
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0;
    }

    /* ==================
       Accordion header – first .textcontent in each grey section
    ================== */

    .main-screen.grey .container > div > .row > .textcontent:first-child {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--p-450) 0;
        font-size: var(--fs-700);
        font-weight: var(--fw-semibold);
        color: var(--primary-accent);
        cursor: pointer;
        user-select: none;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: var(--p-400);
    }

    /* Chevron – expanded state (points up) */
    .main-screen.grey .container > div > .row > .textcontent:first-child::after {
        content: '';
        width: 22px;
        height: 22px;
        flex-shrink: 0;
        background: url('/userdata/02_Kollektionen/arrow-ios-forward-fill.svg') no-repeat center;
        background-size: contain;
        transform: rotate(-90deg);
        transition: transform 0.3s ease;
    }

    /* Collapsed state – arrow points down, content hidden */
    .main-screen.grey.collapsed .container > div > .row > .textcontent:first-child::after {
        transform: rotate(90deg);
    }

    .main-screen.grey.collapsed .container > div > .row > *:not(:first-child) {
        display: none;
    }

    /* Explanation textcontent blocks inside the accordion body */
    .main-screen.grey .container > div > .row > .textcontent:not(:first-child) {
        width: 100%;
        padding: var(--p-200) 0 0;
        font-size: var(--fs-600);
        color: var(--fc-primary);
        line-height: 1.7;
    }

    /* Bold label (textcontent followed by another textcontent) */
    .main-screen.grey .container > div > .row > .textcontent:not(:first-child):has(+ .textcontent) {
        font-weight: var(--fw-semibold);
        font-size: var(--fs-650);
        padding-top: var(--p-400);
    }

    /* ==================
       .collection_list.verwaltung_staff
    ================== */

    /* Department head – full-width card (:has Bürgermeister container) */
    .collection_list.verwaltung_staff:has(.collection_container[class*="rgermeister"]) {
        width: 100%;
        padding: var(--p-400) 0;
        border-bottom: 1px solid #e8e8e8;
        margin-bottom: var(--p-100);
    }

    .collection_list.verwaltung_staff:has(.collection_container[class*="rgermeister"]) .collection_container {
        display: flex;
        align-items: flex-start;
        gap: var(--p-500);
    }

    /* Other staff – 50 % width (side-by-side pairs) */
    .collection_list.verwaltung_staff:not(:has(.collection_container[class*="rgermeister"])) {
        width: 50%;
        padding: var(--p-450) 0;
    }

    .collection_list.verwaltung_staff:not(:has(.collection_container[class*="rgermeister"])) .collection_container {
        display: flex;
        align-items: flex-start;
        gap: var(--p-400);
        padding-right: var(--p-500);
    }

    /* ==================
       Card inner elements
    ================== */

    .collection_content.staff_img {
        flex-shrink: 0;
    }

    .collection_content.staff_img img {
        width: 90px !important;
        height: 90px !important;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

    /* Position / title */
    .collection_content.staff_position {
        font-size: var(--fs-500);
        color: var(--primary-accent);
        font-weight: var(--fw-regular);
        margin-bottom: 4px;
    }

    /* Name – bold */
    .collection_content.staff_name {
        font-size: var(--fs-750);
        font-weight: var(--fw-bold);
        color: var(--fc-primary);
        line-height: 1.2;
        margin-bottom: var(--p-300);
    }

    /* Address – home icon */
    .collection_content.staff_adress {
        position: relative;
        padding-left: 26px;
        margin-bottom: 6px;
        font-size: var(--fs-500);
        color: var(--fc-primary);
        line-height: 1.5;
    }

    .collection_content.staff_adress::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 16px;
        height: 16px;
        background: url('/userdata/02_Kollektionen/home_ver.svg') no-repeat center;
        background-size: contain;
    }

    /* Phone – phone icon */
    .collection_content.staff_telefon {
        position: relative;
        padding-left: 26px;
        margin-bottom: 6px;
        font-size: var(--fs-500);
        color: var(--fc-primary);
    }

    .collection_content.staff_telefon::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 16px;
        height: 16px;
        background: url('/userdata/02_Kollektionen/phone_ver.svg') no-repeat center;
        background-size: contain;
    }

    .collection_content.staff_telefon a {
        color: var(--fc-primary);
        text-decoration: none;
    }

    .collection_content.staff_telefon a:hover {
        color: var(--primary-accent);
    }

    /* Email – mail icon */
    .collection_content.staff_email {
        position: relative;
        padding-left: 26px;
        margin-bottom: 0;
        font-size: var(--fs-500);
        color: var(--fc-primary);
    }

    .collection_content.staff_email::before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 16px;
        height: 16px;
        background: url('/userdata/06_Bausteine/mail_icon.svg') no-repeat center;
        background-size: contain;
    }

    .collection_content.staff_email a {
        color: var(--fc-primary);
        text-decoration: none;
    }

    .collection_content.staff_email a:hover {
        color: var(--primary-accent);
    }

    /* ==================
       Responsive
    ================== */

    @media (max-width: 768px) {

        /* Stack side-by-side cards vertically */
        .collection_list.verwaltung_staff:not(:has(.collection_container[class*="rgermeister"])) {
            width: 100%;
            border-top: 1px solid #e8e8e8;
        }

        .collection_list.verwaltung_staff:not(:has(.collection_container[class*="rgermeister"])) .collection_container {
            padding-right: 0;
        }

        .collection_content.staff_img img {
            width: 72px !important;
            height: 72px !important;
        }

        .collection_content.staff_name {
            font-size: var(--fs-700);
        }
    }

    @media (max-width: 480px) {

        .main-screen.grey .container > div > .row {
            padding: var(--p-400);
        }

        .main-screen.grey .container > div > .row > .textcontent:first-child {
            font-size: var(--fs-650);
        }

        .collection_content.staff_img img {
            width: 60px !important;
            height: 60px !important;
        }
    }
}