:root { --page-extra: calc(265px * var(--scale-factor)); }

body {
    height: auto;
    min-height: calc(100vh + var(--page-extra));
}

.arbeiten-content {
    position: absolute;
    top: calc(305px * var(--scale-factor));
    left: 0;
    right: 0; /* span full viewport width like footer */
    width: 100%;
    /* max-width: var(--container-max-width); */
    height: auto; /* let content define height to avoid top gap */
    color: var(--color-white);
    font-size: var(--font-size-base);
    font-weight: 300;
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-none);
    display: flex;
    align-items: flex-start; /* pin list flush to the top edge */
    /* Universal horizontal gutter */
    padding: 0 var(--gutter-x);
    box-sizing: border-box;
    /* Use full viewport width minus gutters so grid matches line width */
    --inner-w: calc(100vw - (2 * var(--gutter-x)));
    /* Recompute local responsive columns and gap based on this inner width */
    --col-w-responsive: min(var(--col-w-fixed), calc(var(--inner-w) / 4));
    --col-gap: calc((var(--inner-w) - (4 * var(--col-w-responsive))) / 3);
}

/* Removed responsive padding for desktop-first focus */

/* Mobile layout removed for desktop-first focus */

/* .arbeiten-headline removed (unused) */

/* (no grid wrapper used on this page) */

.arbeiten-index {
    margin: 0; /* no extra top gap */
    padding: 0;
    width: var(--inner-w);
    box-sizing: border-box;
    flex: 1 1 auto; /* fill horizontal space within flex parent */
    /* contain removed to avoid large layer allocation */

    /* Row metrics */
    --row-pad: 8px;
    --row-h: calc(var(--font-size-base) + (2 * var(--row-pad)));
    /* List colors */
    --list-primary: #B6B6B6;
    --list-hover: #F5F5F5;

    /* Full-width horizontal separators spanning entire list width */
    position: relative;
    background-image: linear-gradient(
        to bottom,
        transparent calc(100% - 1px),
        var(--color-white) calc(100% - 1px)
    );
    background-size: 100% var(--row-h);
    background-position: 0 var(--row-h); /* start after the header row */
    background-repeat: repeat-y;

    /* Align header cap-height to top edge while keeping 8px row padding */
    transform: translateY(calc(-8px * var(--scale-factor)));
}

@media (prefers-color-scheme: light) {
    .arbeiten-index {
        /* Light mode list colors */
        --list-primary: var(--light-color-black); /* normal state */
        --list-hover: var(--light-color-grey);   /* hover state */
    }
}

.arbeiten-index .row,
.arbeiten-index .row--header {
    list-style: none;
    margin: 0;
    padding: 0;
    height: var(--row-h);
}

/* Grid for header row (non-interactive) */
.arbeiten-index .row--header {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, var(--col-w-responsive)));
    column-gap: var(--col-gap);
    align-items: center;
    color: var(--list-primary);
}
.arbeiten-index .row--header .arbeiten-index__col--category-label {
    text-align: right;
    justify-self: end;
}

.arbeiten-index__col--year-label {
    display: inline-flex;
    align-items: center;
    height: 100%;
}

/* Interactive row: full-row link */
.arbeiten-index .row > a {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, var(--col-w-responsive)));
    column-gap: var(--col-gap);
    align-items: center;
    height: 100%;
    color: var(--list-primary);
    text-decoration: none;
    transition: color 0.3s cubic-bezier(0.2,0,0,1);
}
.arbeiten-index .row > a:hover,
.arbeiten-index .row > a:focus-visible { color: var(--list-hover); }
.arbeiten-index .row > a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.arbeiten-index .row > a .arbeiten-index__col {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arbeiten-index .row > a .arbeiten-index__col--category {
    text-align: right;
    justify-self: end;
}

/* Remove UA margins from any paragraph inside rows */
/* (paragraphs in rows use default margins; keep base spacing) */

/* Mobile fallback removed for desktop-first focus */



footer {
    top: auto;
    bottom: 0;
}

/* Tablet portrait (601px - 1023px)
   - Follow mobile stacking behaviour but retain 40px gutters
   - Keep footer at the bottom using flex layout */
@media (min-width: 601px) and (max-width: 1023px) {
    body {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh + var(--footer-h));
        position: relative;
    }

    #menu-container,
    #footer-container {
        flex-shrink: 0;
    }

    #footer-container {
        margin-top: auto;
    }

    .arbeiten-content {
        position: static;
        flex: 1 0 auto;
        margin: 0;
        padding: calc(305px * var(--scale-factor)) var(--gutter-x) 80px var(--gutter-x);
        box-sizing: border-box;
        width: 100%;
    }

    .arbeiten-index {
        width: 100%;
    }
}

/* Mobile: move list into normal flow so it contributes to page height */
@media (max-width: 600px) {
    /* Page height like home: anchor footer to bottom */
    body {
        min-height: 1225px;
        position: relative;
    }
    :root { --index-stickout: 420px; }

    /* Use normal page scroll; place list so its bottom is 131px above fold on first paint */
    .arbeiten-content {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        padding: 0 var(--gutter-x);
        /* Align visual top of the header row 131px above viewport bottom.
           The list has translateY(-8px), so add +8px to the effective gap. */
        padding-top: calc(100vh - (var(--index-stickout) - 8px));
        box-sizing: border-box;
        overflow: visible;
    }

    footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }

    /* Mobile list columns: Jahr | Titel | Art (right)
       Hide 4th column (Kategorie) */
    .arbeiten-index .row--header {
        grid-template-columns: auto 1fr auto;
        column-gap: 12px;
    }
    .arbeiten-index .row--header .arbeiten-index__col--category-label { display: none; }
    .arbeiten-index .row--header .arbeiten-index__col--type-label {
        text-align: right;
        justify-self: end;
    }

    .arbeiten-index .row > a {
        grid-template-columns: auto 1fr auto;
        column-gap: 12px;
    }
    .arbeiten-index .row > a .arbeiten-index__col--category { display: none; }
    .arbeiten-index .row > a .arbeiten-index__col--type {
        text-align: right;
        justify-self: end;
    }
    .arbeiten-index .row > a .arbeiten-index__col--year {
        display: inline-block;
        padding-right: calc(12px * var(--scale-factor));
    }
}