/* ---------------------------------------
   ARCHIV – FILTER + NEUE SPALTENREIHENFOLGE

   Wird NACH style.css geladen.
--------------------------------------- */


/* ---------------------------------------
   HEADER / SEARCH / FILTER
--------------------------------------- */

.header--archive {
    justify-content: space-between;
}


.archive-tools {
    position: relative;

    flex: 1 1 auto;
    min-width: 0;
}


/*
   Gleiche zweite Achse wie auf den Projektseiten:
   linker Rand + Projektspalte + Layout-Abstand.

   Da .archive-filters innerhalb des bereits um
   var(--rand-x) eingerückten Headers sitzt, reicht:
   --projekt-spalte-links + --layout-gap
*/

.archive-filters {
    position: absolute;

    top: 0;
    left: calc(
        var(--projekt-spalte-links)
        + var(--layout-gap)
    );

    display: flex;
    align-items: center;

    gap: 28px;

    white-space: nowrap;
}


.archive-filter {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin: 0;
    padding: 0;

    border: 0;
    background: transparent;

    font: inherit;
    letter-spacing: inherit;
    color: inherit;

    cursor: pointer;
}


.archive-checkbox {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 0.82em;
    height: 0.82em;

    flex: 0 0 0.82em;

    border: 1.5px solid currentColor;
}


.archive-checkbox::after {
    content: "X";

    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -48%);

    font-size: 0.72em;
    line-height: 1;

    opacity: 0;

    transition:
        opacity 0.18s ease;
}


/* Hover zeigt das X bereits als Vorschau */

@media (hover: hover) and (pointer: fine) {

    .archive-filter:not(.is-active):hover
    .archive-checkbox::after {
        opacity: 0.3;
    }

}


/* Ausgewählter Filter: X bleibt stehen */

.archive-filter.is-active
.archive-checkbox::after {
    opacity: 1;
}

.archive-head {
    margin-bottom: calc(var(--line-height) * 2);
}


/* ---------------------------------------
   DESKTOP – NEUE REIHENFOLGE

   Projektname | Aufgabe | Bauherr |
   Standort | LPH | Nr.
--------------------------------------- */

.archive-head,
.archive-row {
    display: grid;

    grid-template-columns:
        minmax(0, 2.35fr)
        minmax(0, 1.35fr)
        minmax(0, 1.35fr)
        minmax(0, 1.15fr)
        minmax(58px, 0.55fr)
        48px;

    column-gap: 28px;

    width: 100%;
    align-items: start;
}


/* Alles linksbündig ... */

.archive-head > *,
.archive-row > * {
    text-align: left;
}


/* ... nur Nr. an die rechte Kante */

.archive-head > :nth-child(6),
.archive-row > :nth-child(6) {
    justify-self: end;

    width: auto;
    margin: 0;
    padding: 0;

    text-align: right;
    white-space: nowrap;
}


/* ---------------------------------------
   GRUPPEN
--------------------------------------- */

.archive-group {
    width: 100%;
}


.archive-group-title {
    margin:
        var(--line-height)
        0
        var(--line-height)
        0;
}


.archive-group.is-hidden {
    display: none;
}


.archive-group-rows {
    width: 100%;
}

.archive-page {
    padding-top: calc(var(--line-height)*7);
}


/* ---------------------------------------
   MITTLERE DESKTOPS / KLEINE LAPTOPS
--------------------------------------- */

@media (max-width: 1250px) {

    /* Filter bekommen eine eigene Zeile unter Search,
       bevor sie mit dem ATH-Menü kollidieren. */

    .archive-filters {
        top: calc(var(--line-height) + 10px);
        left: 0;

        gap: 22px;
    }


    .archive-page {
    padding-top: calc(var(--line-height)*7);
    }



    .archive-head,
    .archive-row {
        grid-template-columns:
            minmax(0, 2.4fr)
            minmax(0, 1.45fr)
            minmax(0, 1.15fr)
            minmax(58px, 0.55fr)
            46px;

        column-gap: 20px;
    }


    /* Bauherr zuerst ausblenden */

    .archive-head > :nth-child(3),
    .archive-row > :nth-child(3) {
        display: none;
    }


    /* Übrige Spalten sicher sichtbar */

    .archive-head > :nth-child(1),
    .archive-head > :nth-child(2),
    .archive-head > :nth-child(4),
    .archive-head > :nth-child(5),
    .archive-head > :nth-child(6),
    .archive-row > :nth-child(1),
    .archive-row > :nth-child(2),
    .archive-row > :nth-child(4),
    .archive-row > :nth-child(5),
    .archive-row > :nth-child(6) {
        display: block;
    }

}


/* ---------------------------------------
   TABLET / SCHMALES BROWSERFENSTER
--------------------------------------- */

@media (max-width: 950px) {

    .archive-head,
    .archive-row {
        grid-template-columns:
            minmax(0, 2fr)
            minmax(0, 1.25fr)
            46px;

        column-gap: 18px;
    }


    /* Sichtbar: Projektname, Aufgabe, Nr. */

    .archive-head > :nth-child(1),
    .archive-head > :nth-child(2),
    .archive-head > :nth-child(6),
    .archive-row > :nth-child(1),
    .archive-row > :nth-child(2),
    .archive-row > :nth-child(6) {
        display: block;
    }


    /* Bauherr, Standort, LPH ausblenden */

    .archive-head > :nth-child(3),
    .archive-head > :nth-child(4),
    .archive-head > :nth-child(5),
    .archive-row > :nth-child(3),
    .archive-row > :nth-child(4),
    .archive-row > :nth-child(5) {
        display: none;
    }

}


/* ---------------------------------------
   SMARTPHONE
--------------------------------------- */

@media (max-width: 700px) {

    /* Search oben, Filter darunter */

    .archive-filters {
        top: calc(var(--line-height) + 10px);
        left: 0;

        flex-direction: column;
        align-items: flex-start;

        gap: 6px;
    }


    .archive-page {
    padding-top: calc(var(--line-height)*7);
    }


    .archive-head,
    .archive-row {
        grid-template-columns:
            minmax(0, 1fr)
            42px;

        column-gap: 14px;
    }


    /* Kopf: nur Projektname + Nr. */

    .archive-head > :nth-child(1),
    .archive-head > :nth-child(6),
    .archive-row > :nth-child(1),
    .archive-row > :nth-child(2),
    .archive-row > :nth-child(6) {
        display: block;
    }


    .archive-head > :nth-child(2),
    .archive-head > :nth-child(3),
    .archive-head > :nth-child(4),
    .archive-head > :nth-child(5),
    .archive-row > :nth-child(3),
    .archive-row > :nth-child(4),
    .archive-row > :nth-child(5) {
        display: none;
    }


    /* Projektname */

    .archive-head > :nth-child(1),
    .archive-row > :nth-child(1) {
        grid-column: 1;
        grid-row: 1;

        text-align: left;
    }


    /* Nr. */

    .archive-head > :nth-child(6),
    .archive-row > :nth-child(6) {
        grid-column: 2;
        grid-row: 1;

        justify-self: end;

        width: auto;
        margin: 0;
        padding: 0;

        text-align: right;
        white-space: nowrap;
    }


    /* Aufgabe unter dem Projektnamen */

    .archive-row > :nth-child(2) {
        display: block;

        grid-column: 1 / -1;
        grid-row: 2;

        text-align: left;
    }


    .archive-group-title {
        margin-top: calc(var(--line-height) * 1.5);
    }

}


/* ---------------------------------------
   SEHR KLEINE SMARTPHONES
--------------------------------------- */

@media (max-width: 420px) {

    /* Nur noch Projektname + Nr. */

    .archive-row > :nth-child(2) {
        display: none;
    }

}