/* ============================================================
   Drucksachenarchiv
   ============================================================ */


/* ------------------------------------------------------------
   Seite
   ------------------------------------------------------------ */

.archiv-seite {
    display: flex;
    flex-direction: column;

    gap: var(--abstand-7);
}


/* ------------------------------------------------------------
   Filter
   ------------------------------------------------------------ */

.archiv-filterbereich {
    width: 100%;
}


/* Suche soll die gesamte Breite nutzen */

.archiv-filterformular>.formular-gruppe {
    max-width: 800px;
}


/* Fünf Filterfelder:
   auf größeren Bildschirmen automatisch sinnvoll verteilen */

.archiv-filter-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}


/* ------------------------------------------------------------
   Ergebnisse
   ------------------------------------------------------------ */

.archiv-ergebnisse {
    display: flex;
    flex-direction: column;

    gap: var(--abstand-4);
}


.archiv-ergebnisse-kopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--abstand-4);
}


.archiv-ergebnisse-kopf h3 {
    margin: 0;

    font-size: 1.25rem;
}


.archiv-ergebnisanzahl {
    margin: var(--abstand-1) 0 0;

    color: var(--farbe-text-sekundaer);
}


.archiv-seiteninfo {
    flex-shrink: 0;

    color: var(--farbe-text-sekundaer);

    font-size: 0.875rem;
}


/* ------------------------------------------------------------
   Drucksachen
   ------------------------------------------------------------ */

.archiv-drucksachen-nummer {
    color: var(--farbe-primaer);

    font-weight: 700;
    white-space: nowrap;
}


.archiv-titel-zelle {
    min-width: 260px;
}


.archiv-drucksachen-titel {
    color: var(--farbe-text);

    font-weight: 650;
    line-height: 1.4;

    text-decoration: none;
}


.archiv-drucksachen-titel:hover {
    color: var(--farbe-primaer);

    text-decoration: underline;
    text-underline-offset: 3px;
}


.archiv-datum {
    color: var(--farbe-text-sekundaer);

    white-space: nowrap;
}


.archiv-vorgangsstand {
    color: var(--farbe-primaer);

    font-weight: 500;

    text-decoration: none;
}


.archiv-vorgangsstand:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}


/* ------------------------------------------------------------
   Dokumente
   ------------------------------------------------------------ */

.archiv-dokumente {
    display: flex;
    flex-wrap: wrap;

    gap: var(--abstand-1);

    white-space: nowrap;
}


/* ------------------------------------------------------------
   Leerzustand
   ------------------------------------------------------------ */

.archiv-leerzustand {
    display: flex;
    flex-direction: column;
    align-items: center;

    padding:
        var(--abstand-8) var(--abstand-5);

    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-gross);

    background-color: var(--farbe-oberflaeche);

    text-align: center;
}


.archiv-leerzustand-symbol {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: var(--abstand-3);

    border-radius: 50%;

    background-color: var(--gruen-100);

    color: var(--farbe-primaer);

    font-size: 1.5rem;
    font-weight: 700;
}


.archiv-leerzustand h3 {
    margin-bottom: var(--abstand-2);
}


.archiv-leerzustand p {
    max-width: 500px;

    margin-bottom: var(--abstand-5);

    color: var(--farbe-text-sekundaer);
}


/* ------------------------------------------------------------
   Pagination
   ------------------------------------------------------------ */

.archiv-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: var(--abstand-4);

    margin-top: var(--abstand-2);
}


.archiv-pagination-vorherige {
    justify-self: start;
}


.archiv-pagination-status {
    color: var(--farbe-text-sekundaer);

    font-size: 0.875rem;
    font-weight: 500;

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


.archiv-pagination-naechste {
    justify-self: end;
}


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

@media (max-width: 900px) {

    .archiv-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 700px) {

    .archiv-seite {
        gap: var(--abstand-6);
    }


    .archiv-filter-grid {
        grid-template-columns: 1fr;
    }


    .archiv-ergebnisse-kopf {
        align-items: flex-start;
        flex-direction: column;
    }


    .archiv-pagination {
        grid-template-columns: 1fr 1fr;

        gap: var(--abstand-3);
    }


    .archiv-pagination-status {
        grid-column: 1 / -1;
        grid-row: 1;

        padding-bottom: var(--abstand-1);
    }


    .archiv-pagination-vorherige {
        grid-column: 1;
        grid-row: 2;

        justify-self: stretch;
    }


    .archiv-pagination-naechste {
        grid-column: 2;
        grid-row: 2;

        justify-self: stretch;
    }


    .archiv-pagination .button {
        width: 100%;
    }


    .archiv-leerzustand {
        padding:
            var(--abstand-6) var(--abstand-4);
    }

}

/* ------------------------------------------------------------
   Suchoptionen
   ------------------------------------------------------------ */

.archiv-suchoptionen {
    display: flex;
    flex-direction: column;

    gap: var(--abstand-4);

    padding: var(--abstand-5);

    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-normal);

    background-color: var(--farbe-oberflaeche-dezent);
}


.archiv-suchoptionen-kopf {
    padding-bottom: var(--abstand-3);

    border-bottom: 1px solid var(--farbe-rahmen);
}


.archiv-suchoptionen-titel {
    margin: 0;

    color: var(--farbe-text);

    font-size: 1rem;
    font-weight: 700;
}


.archiv-suchoptionen-kopf p {
    margin:
        var(--abstand-1) 0 0;

    color: var(--farbe-text-sekundaer);

    font-size: 0.875rem;
    line-height: 1.5;

    
}

@media (max-width: 700px) {

    .archiv-suchoptionen {
        padding: var(--abstand-4);
    }

}

/* ============================================================
   Mobile Drucksachen-Karten
   ============================================================ */

.archiv-karten {
    display: none;
}


.archiv-karte {
    display: flex;
    flex-direction: column;

    gap: var(--abstand-4);

    padding: var(--abstand-5);

    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-gross);

    background-color: var(--farbe-oberflaeche);
}


.archiv-karte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--abstand-3);
}


.archiv-karte-titel {
    margin: 0;

    font-size: 1.0625rem;
    line-height: 1.5;
}


.archiv-karte-informationen {
    display: grid;

    gap: var(--abstand-3);

    padding-top: var(--abstand-4);

    border-top: 1px solid var(--farbe-rahmen);
}


.archiv-karte-information {
    display: flex;
    flex-direction: column;

    gap: var(--abstand-1);
}


.archiv-karte-label {
    color: var(--farbe-text-sekundaer);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}


.archiv-karte-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;

    gap: var(--abstand-3);

    padding-top: var(--abstand-4);

    border-top: 1px solid var(--farbe-rahmen);
}

@media (max-width: 700px) {

    .tabelle-wrapper {
        display: none;
    }

    .archiv-karten {
        display: grid;

        gap: var(--abstand-3);
    }

    .archiv-karte {
        padding: var(--abstand-4);
    }

    .archiv-karte-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .archiv-dokumente,
    .tabellen-aktionen {
        width: 100%;
    }

}