/* Gestaltung 2026 – Offenbarungen: Jahresübersicht (die Leseansicht steht in Lesen.css) */

.jahre select { font: inherit; padding: .4rem .5rem; color: var(--tinte); background: var(--karte); border: 1px solid var(--linie); border-radius: 6px; }

.jahresliste { width: min(100% - 4rem, 52rem); margin-top: 3.5rem; margin-bottom: 4rem; }
.jahresliste .seitenkopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; }
.jahresliste h1 { font-family: var(--schrift-text); font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 0; }
.jahre { display: flex; align-items: center; gap: 1rem; font-family: var(--schrift-ui); }
.jahresliste .aktuelle { flex-basis: 100%; justify-content: center; max-width: max-content; }
.jahresliste .aktuelle span { font-weight: 400; opacity: .85; }
.jahre a { color: var(--leise); }
.jahre a:hover { color: var(--tinte); }

.offenbarungen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.offenbarungen li { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--linie); }
.offenbarungen .eintrag {
	flex: 1; display: grid; grid-template-columns: 11rem 1fr; gap: .15rem 1.5rem; padding: .85rem .5rem;
	color: var(--tinte); text-decoration: none;
}
.offenbarungen .eintrag:hover { background: var(--flaeche); }
.offenbarungen .tag { font-family: var(--schrift-text); font-size: 1.15rem; }
.offenbarungen .ort { font-family: var(--schrift-ui); color: var(--leise); align-self: center; }
.offenbarungen .titel { grid-column: 2; font-family: var(--schrift-ui); }
.offenbarungen .datei { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--schrift-ui); font-size: .92rem; color: var(--link); text-decoration: none; padding: .4rem .6rem; border-radius: 6px; }
.offenbarungen .datei:hover { background: var(--flaeche); color: var(--link-hover); }
.offenbarungen .datei svg { width: 1.1rem; height: 1.1rem; }

.jahresliste .naechstes { margin-top: 2rem; font-family: var(--schrift-ui); color: var(--leise); }
.jahresliste .leer { font-family: var(--schrift-ui); color: var(--leise); }

@media (max-width: 600px) {
	.jahresliste { width: min(100% - 2rem, 52rem); margin-top: 2rem; }
	.offenbarungen .eintrag { grid-template-columns: 1fr; padding: .75rem .25rem; }
	.offenbarungen .titel { grid-column: 1; }
}