/* Archiv — behobene Meldungen, im Stil der übrigen Bereiche. */

.suche {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    padding: 9px 16px;
    background: var(--grund);
    border: 1.5px solid var(--linie);
    border-radius: var(--r-pille);
    color: var(--text-schwach);
    transition: border-color .15s ease;
}

.suche:focus-within { border-color: var(--akzent); color: var(--akzent); }

.suche__zeichen { flex-shrink: 0; }

.suche__feld {
    width: 190px;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: var(--text);
}

.suche__feld:focus { outline: none; }
.suche__feld::-webkit-search-cancel-button { display: none; }

.suche__zuruecksetzen {
    flex-shrink: 0;
    font-size: 19px;
    line-height: 1;
    color: var(--text-schwach);
    text-decoration: none;
}

.monat {
    margin: 12px 0 -4px;
    padding: 0 6px;
    font-family: var(--schrift-titel);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-schwach);
}

.eintrag { padding: 20px 26px; }
.eintrag + .eintrag { border-top: 1px solid #EFF2F1; }

.eintrag__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.eintrag__gewerk {
    padding: 4px 11px;
    border-radius: var(--r-pille);
    background: #F1EDE6;
    font-size: 12.5px;
    font-weight: 500;
    color: #6B6357;
}

.eintrag__datum {
    margin-left: auto;
    font-size: 13.5px;
    color: var(--text-schwach);
}

.eintrag__titel {
    margin: 12px 0 0;
    font-family: var(--schrift-titel);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.3;
    color: var(--text);
    text-wrap: pretty;
}

.eintrag__text {
    margin: 7px 0 0;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--text-sekundaer);
    text-wrap: pretty;
}

.eintrag__dauer {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--behoben);
}

.leer {
    margin: 0;
    padding: 40px 28px;
    background: var(--grund);
    border-radius: 22px;
    text-align: center;
    font-size: 15.5px;
    color: var(--text-schwach);
}

.leer .verweis { margin-left: 6px; font-size: 15.5px; }

@media (max-width: 899px) {
    .suche { width: 100%; }
    .suche__feld { width: 100%; font-size: 17px; }

    .monat { margin: 8px 0 -4px; }

    .eintrag { padding: 16px 18px; }
    .eintrag__kopf { gap: 8px; }
    .eintrag__datum { width: 100%; margin-left: 0; font-size: 13px; }
    .eintrag__titel { font-size: 17.5px; }
    .eintrag__text { font-size: 15px; }
}

/* ── Jahresauswahl ───────────────────────────────────────────────────────
   Geladen wird immer nur ein Jahr. Ohne das wüchse die Seite mit jedem
   Monat weiter — nach fünf Jahren wären es über tausend Einträge. */

.jahre { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }

.jahre__punkt {
    display: inline-grid;
    place-items: center;
    min-height: 36px;
    padding: 0 15px;
    border: 1.5px solid var(--linie-kraeftig);
    border-radius: var(--r-pille);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-sekundaer);
    text-decoration: none;
}

.jahre__punkt--aktiv {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--text-auf-farbe);
}

/* ── Monate zum Auf- und Zuklappen ──────────────────────────────────────
   <details> braucht kein JavaScript. Der jüngste Monat steht offen. */

.monatsblock + .monatsblock { margin-top: 10px; }

summary.monat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 6px;
    cursor: pointer;
    list-style: none;
    -webkit-tap-highlight-color: transparent;
}

summary.monat::-webkit-details-marker { display: none; }
summary.monat:hover .monat__name { color: var(--akzent); }

.monat__name {
    font-family: var(--schrift-titel);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    transition: color .12s ease;
}

.monat__anzahl {
    min-width: 22px;
    padding: 2px 8px;
    border-radius: var(--r-pille);
    background: var(--flaeche-tief);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    color: var(--text-tertiaer);
}

.monat__pfeil {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--text-schwach);
    transition: transform .18s ease;
}

.monatsblock[open] .monat__pfeil { transform: rotate(180deg); }