body.hauptverwaltung,
body.finanzverwaltung,
body.bauverwaltung,
body.burgermeister {

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

    main#main-content .main-screen {
        /* padding: 0; */
        /* border-bottom: 1px solid var(--primary-accent); */
    }

    /* White card container wrapping accordion content */
    .main-screen .container > div > .row,
    .main-screen .container > .row {
        background: var(--clr-primary-white);
        border-radius: var(--br-primary);
        /* padding: var(--p-400); */
        padding: var(--p-200);
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        float: none;
        box-sizing: border-box;
    }

    /* staff_group_flip must be full-width block */
    .staff_group_flip {
        width: 100%;
        float: none;
        display: block;
    }
/* .collection_list.col_subsite .col-subsite_link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0;
} */

    /* Ensure all accordion rows are properly declared via staff_group_flip too */
    .staff_group_flip .row {
        background: var(--clr-primary-white);
        border-radius: var(--br-primary);
        padding: var(--p-400);
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        float: none;
        box-sizing: border-box;
        overflow: hidden;
    }

    /* ==================
       Accordion header – .title_flip inside each staff_group_flip
    ================== */

    .title_flip {
        width: 100%;
    }

    .staff_group_flip .row > .title_flip {
        width: 100%;
    }

    .title_flip .textcontent,
    .staff_group_flip .row > .title_flip .textcontent {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        /* padding: var(--p-400) 0; */
        font-size: var(--fs-700);
        font-weight: var(--fw-semibold);
        color: var(--primary-accent);
        cursor: pointer;
        user-select: none;
        position: relative;
        margin-bottom: 0;
    }

    /* Draw a full-width bottom border visually extending into the row padding
       using an absolutely positioned pseudo-element so the text layout isn't affected. */

    /* .staff_group_flip .title_flip .textcontent::before {
        display: none;
    } */
    
    .opened .title_flip .textcontent::before,
    .staff_group_flip.opened .row > .title_flip .textcontent::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: -8px;        
        height: 1px;
        background: #e0e0e0;
        pointer-events: none;
    }

    

    /* Chevron – expanded state (points up) */
    .title_flip .textcontent::after,
    .staff_group_flip.opened .row > .title_flip .textcontent::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;
    }

    /* opened state – arrow points right, content hidden */
    .staff_group_flip.opened .row > .title_flip .textcontent::after,
    .staff_group_flip.opened .title_flip .textcontent::after,
    .row.opened > .title_flip .textcontent::after {
        transform: rotate(-90deg);
    }

    .staff_group_flip .row > *:not(.title_flip),
    .row > *:not(.title_flip) {
        display: none !important;
    }
    .staff_group_flip.opened .row > *:not(.title_flip),
    .row.opened > *:not(.title_flip) {
        display: block !important;
    }

    /* opened state – reduced padding and title styling */
    .staff_group_flip.opened .row {
        padding: var(--p-200) !important;
    }

    /* Keep the bottom padding of expanded rows equal to the opened state */
    .staff_group_flip .row {
        padding: var(--p-400) var(--p-400) var(--p-200);
    }

    .staff_group_flip.opened .row > .title_flip .textcontent {
        padding: 0;
        margin-bottom: 0;
        border-bottom: none;
    }

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

    /* Title/subtitle for pages that use .content-selector -> .container#position structure */
    .content-selector .container#position .title .textcontent,
    .content-selector .container#position > .title .textcontent {
        width: 100%;
        padding: var(--p-400) 0;
        font-size: var(--fs-825);
        font-weight: var(--fw-semibold);
        color: var(--primary-accent);
        /* margin-bottom: var(--p-300); */
    }

    .content-selector .container#position .subtitle .textcontent,
    .content-selector .container#position > .subtitle .textcontent {
        width: 100%;
        padding: var(--p-200) 0 0;
        font-size: var(--fs-600);
        color: var(--fc-primary);
        line-height: 1.7;
        text-align: center;
    }

    /* Compatibility: use .col-xs-12 as title/subtitle containers */
    .main-screen .container > div > .row > .col-xs-12 .textcontent,
    .main-screen .container > .row > .col-xs-12 .textcontent {
        width: 100%;
        padding: var(--p-200) 0 0;
        font-size: var(--fs-600);
        color: var(--fc-primary);
        line-height: 1.7;
    }

    /* First .col-xs-12 acts as the title (larger, accent color) */
    .main-screen .container > div > .row > .col-xs-12:first-child .textcontent,
    .main-screen .container > .row > .col-xs-12:first-child .textcontent {
        padding: var(--p-400) 0;
        font-size: var(--fs-700);
        font-weight: var(--fw-semibold);
        color: var(--primary-accent);
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: var(--p-300);
    }



    .main-screen .container > div > .row > .text_title_group > .title_desc, 
    .main-screen .container > .row > .text_title_group > .title_desc {
        font-weight: var(--fw-semibold);
        font-size: var(--fs-650);
        padding: 15px var(--p-650) ;
        
    }

    /* staff_description – full width, prevent   overflow */
    .main-screen .container > div > .row > .text_title_group > .staff_description,
    .main-screen .container > .row > .text_title_group > .staff_description {
        width: 100%;
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
        padding: 15px var(--p-650) var(--p-650);
    }

    .main-screen .container > div > .row > .staff_description .textcontent,
    .main-screen .container > .row > .staff_description .textcontent {
        overflow-wrap: break-word;
        word-break: break-word;
        min-width: 0;
    }

    /* ==================
       .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-650) var(--p-500);
        border-bottom: 1px solid var(--primary-accent);
        margin-bottom: var(--p-100);
    }

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

    /* Other staff – 50 % width (side-by-side pairs) */
    .collection_list.verwaltung_staff:not(:has(.collection_container[class*="rgermeister"])) {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0;
        padding: var(--p-650) var(--p-500);
        float: none;
        border-bottom: 1px solid var(--primary-accent);
        margin-bottom: var(--p-100);
    }

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

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

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

    .collection_content.staff_img img {
        width: 200px !important;
        height: 200px !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_orig_w.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%;
            flex: 0 0 100%;
            max-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 .container > div > .row {
            padding: var(--p-400);
        }

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

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