/**
 * OSTBRONX – „Das Archiv" (Wissensdatenbank).
 *
 * Karten-Grid im Karteikarten-Look (Foto s/w, wird beim Hover farbig; Jahr als
 * Mono-Badge), darüber Suche + Themen-Chips + Jahr-Sortierung. Ein Klick
 * öffnet den Eintrag als Detail-Ansicht im Druck-Tafel-Layout (Farbstreifen
 * Gelb/Magenta/Blau, Papier-Grau, Mono-Credits) mit verwandten Einträgen.
 *
 * Ohne JS: Karten als Anker-Navigation, alle Einträge untereinander.
 * Mit JS (.is-enhanced): Übersicht ↔ Detail (.is-viewing), Filter & Suche.
 */

/* Einheitliche Content-Spalte wie .ob-section/.ob-pagehead (startseite.css):
   max-width = --ob-colmax, Gutter kommt vom globalen Root-Padding. */
.ob-archiv{box-sizing:border-box;max-width:var(--ob-colmax);margin-inline:auto !important;padding-inline:0;padding-bottom:72px;}

/* Kompakter Multiplikator-Banner rechts oben im Seitenkopf: schwarze Box mit
   CI-Farbstreifen links (wie die Tafel-Optik) und Button-CTA. */
.ob-pagehead--archiv{position:relative;}
.ob-archiv-multi{position:absolute;top:56px;right:0;width:min(430px,38%);box-sizing:border-box;background:var(--ob-ink);color:#fff;padding:24px 28px 24px 34px;box-shadow:6px 8px 0 rgba(20,20,20,.14);}
.ob-archiv-multi::before{content:"";position:absolute;inset:0 auto 0 0;width:8px;background:linear-gradient(180deg,var(--ob-gelb) 0 22%,var(--ob-magenta) 22% 38%,var(--ob-blau) 38% 100%);}
.ob-archiv-multi__kicker{font-family:var(--ob-font-mono);font-size:13px;letter-spacing:.09em;color:var(--ob-gelb);margin:0 0 10px;}
.ob-archiv-multi__text{font-size:16.5px;line-height:1.55;color:#EDEDEA;margin:0 0 16px;}
.ob-archiv-multi__cta{display:inline-block;font-family:var(--ob-font-display);font-weight:700;font-size:16px;line-height:1.1;background:var(--ob-magenta);color:#fff;text-decoration:none;padding:11px 18px;}
.ob-archiv-multi__cta:hover{background:#fff;color:var(--ob-ink);}
@media (max-width: 1100px){
	/* relative statt static: sonst ankert der ::before-Streifen am Pagehead
	   und läuft dort links über den Text (Mobile-Bug 19.08.). */
	.ob-archiv-multi{position:relative;top:auto;right:auto;width:auto;margin-top:22px;}
}

/* ---------- Werkzeuge: Suche, Chips, Sortierung ---------- */
.ob-archiv__tools{margin:8px 0 26px;}
.ob-archiv__suchzeile{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.ob-archiv__suche{flex:1 1 320px;font-family:var(--ob-font-mono);font-size:16px;letter-spacing:.03em;padding:12px 16px;border:2px solid var(--ob-ink);background:#fff;color:var(--ob-ink);}
.ob-archiv__suche:focus{outline:3px solid var(--ob-gelb);outline-offset:1px;}
.ob-archiv__sort{white-space:nowrap;}
.ob-archiv__sort[aria-pressed="true"]{background:var(--ob-ink);color:#fff;}
.ob-archiv__chips{display:flex;flex-wrap:wrap;gap:8px;}
.ob-archiv__chip{font-family:var(--ob-font-mono);font-size:14.5px;letter-spacing:.05em;padding:8px 14px;border:2px solid var(--ob-ink);background:#fff;color:var(--ob-ink);cursor:pointer;}
.ob-archiv__chip:hover{background:var(--ob-gelb);}
.ob-archiv__chip.is-active{background:var(--ob-ink);color:#fff;}
.ob-archiv__count{margin:12px 0 0;}

/* ---------- Karten-Grid ---------- */
.ob-archiv__grid{list-style:none;margin:16px 0 48px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 24px;}
.ob-archiv__griditem{margin:0;}
.ob-archiv__griditem.is-hidden{display:none;}

.ob-archivkarte{display:block;height:100%;text-decoration:none;color:var(--ob-ink);background:#fff;border:2px solid var(--ob-ink);box-shadow:4px 6px 0 rgba(20,20,20,.14);transition:transform .2s ease,box-shadow .2s ease;}
.ob-archivkarte:hover,.ob-archivkarte:focus-visible{transform:translateY(-5px);box-shadow:7px 11px 0 rgba(20,20,20,.2);}

.ob-archivkarte__bild{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-bottom:2px solid var(--ob-ink);background:#ECEBE6;}
.ob-archivkarte__bild img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08);transition:filter .25s ease,transform .35s ease;}
.ob-archivkarte:hover .ob-archivkarte__bild img,.ob-archivkarte:focus-visible .ob-archivkarte__bild img{filter:none;transform:scale(1.04);}
/* Logo-Kachel (Über OSTBRONX): Wortmarke bleibt immer farbig. */
.ob-archiv__griditem[data-slug="ueber-ostbronx"] .ob-archivkarte__bild img{filter:none;}
.ob-eintrag__verwandt-liste a[data-slug-link="ueber-ostbronx"] img{filter:none;}
.ob-archivkarte__zeit{position:absolute;left:0;top:0;background:var(--ob-ink);color:#fff;font-family:var(--ob-font-mono);font-size:13.5px;letter-spacing:.08em;padding:5px 10px;}

.ob-archivkarte__body{display:block;padding:14px 16px 16px;}
.ob-archivkarte__kurz{display:block;font-family:var(--ob-font-display);font-weight:700;font-size:20px;line-height:1.15;}
.ob-archivkarte__titel{display:block;font-size:14.5px;line-height:1.4;color:var(--ob-grey);margin-top:5px;}
.ob-archivkarte__tags{display:block;font-family:var(--ob-font-mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ob-magenta-ink);margin-top:10px;}

/* Ausblick-Karte: das Archiv wächst — gleiche Struktur/Höhe wie echte Karten
   (3:2-Bildfläche + Textkörper), nur gestrichelt und nicht klickbar. */
.ob-archiv__soonitem{margin:0;}
.ob-archiv__soon{display:block;height:100%;box-sizing:border-box;border:2px dashed var(--ob-grey);background:transparent;}
.ob-archiv__soon-bild{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;border-bottom:2px dashed var(--ob-grey);}
.ob-archiv__soon-num{font-family:var(--ob-font-display);font-weight:700;font-size:56px;line-height:1;color:var(--ob-magenta);}
.ob-archiv__soon-body{display:block;padding:14px 16px 16px;}
.ob-archiv__soon-kurz{display:block;font-family:var(--ob-font-display);font-weight:700;font-size:20px;line-height:1.15;color:var(--ob-grey);}
.ob-archiv__soon-text{display:block;font-family:var(--ob-font-mono);font-size:13px;line-height:1.5;letter-spacing:.03em;color:var(--ob-grey);margin-top:5px;}

/* ---------- Detail-Leiste (nur mit JS sichtbar) ---------- */
.ob-archiv__detailbar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 22px;}
.ob-archiv__blaettern{display:inline-flex;gap:8px;}
.ob-archiv__prev[disabled],.ob-archiv__next[disabled]{opacity:.35;cursor:not-allowed;}

/* ---------- Eintrag (Detail) ---------- */
.ob-eintrag{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:0;border:2px solid var(--ob-ink);background:#EFEEE9;box-shadow:6px 8px 0 rgba(20,20,20,.14);margin:0 0 40px;scroll-margin-top:110px;}

.ob-eintrag__media{position:relative;margin:0;background:#141414;border-right:2px solid var(--ob-ink);display:flex;flex-direction:column;}
.ob-eintrag__media img{display:block;width:100%;height:auto;margin:auto 0;}
.ob-eintrag__credit{font-family:var(--ob-font-mono);font-size:12.5px;line-height:1.5;letter-spacing:.04em;color:#C9C7C0;padding:10px 14px;margin-top:auto;}

.ob-eintrag__body{position:relative;padding:30px 34px 30px 46px;}
.ob-eintrag__body::before{content:"";position:absolute;inset:0 auto 0 0;width:10px;background:linear-gradient(180deg,var(--ob-gelb) 0 22%,var(--ob-magenta) 22% 38%,var(--ob-blau) 38% 100%);}
.ob-eintrag__meta{font-family:var(--ob-font-mono);font-size:13.5px;letter-spacing:.06em;color:var(--ob-grey);margin:0 0 14px;display:flex;align-items:center;flex-wrap:wrap;gap:6px;}
.ob-eintrag__zeit{background:var(--ob-ink);color:#fff;padding:3px 8px;}
.ob-eintrag__tag{font-family:var(--ob-font-mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--ob-grey);background:transparent;color:var(--ob-grey);padding:3px 8px;}
.ob-eintrag__tag:not([disabled]){cursor:pointer;border-color:var(--ob-magenta-ink);color:var(--ob-magenta-ink);}
.ob-eintrag__tag:not([disabled]):hover{background:var(--ob-magenta);border-color:var(--ob-magenta);color:#fff;}
.ob-eintrag__titel{font-family:var(--ob-font-display);font-weight:700;font-size:clamp(24px,2.6vw,32px);line-height:1.08;letter-spacing:-.01em;margin:0 0 18px;}
.ob-eintrag__titel:focus{outline:none;}
.ob-eintrag__text{font-size:17.5px;line-height:1.62;margin:0 0 14px;}

/* Verwandte Einträge */
.ob-eintrag__verwandt{border-top:1px solid var(--ob-border);margin-top:24px;padding-top:16px;}
.ob-eintrag__verwandt-titel{font-family:var(--ob-font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--ob-grey);margin:0 0 10px;}
.ob-eintrag__verwandt-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;}
.ob-eintrag__verwandt-liste a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ob-ink);border:2px solid var(--ob-ink);background:#fff;padding:6px 12px 6px 6px;transition:background .15s ease;}
.ob-eintrag__verwandt-liste a:hover{background:var(--ob-gelb-wash);}
.ob-eintrag__verwandt-liste img{width:52px;height:38px;object-fit:cover;display:block;filter:grayscale(1);}
.ob-eintrag__verwandt-liste span{font-family:var(--ob-font-display);font-weight:700;font-size:14.5px;line-height:1.2;}
.ob-eintrag__verwandt-liste em{display:block;font-style:normal;font-family:var(--ob-font-mono);font-weight:400;font-size:12px;color:var(--ob-grey);}

/* ---------- Enhanced-Modus: Übersicht ↔ Detail ---------- */
.ob-archiv.is-enhanced .ob-archiv__detail{display:none;}
.ob-archiv.is-enhanced.is-viewing .ob-archiv__detail{display:block;}
.ob-archiv.is-enhanced.is-viewing .ob-archiv__grid,
.ob-archiv.is-enhanced.is-viewing .ob-archiv__tools,
.ob-archiv.is-enhanced.is-viewing .ob-archiv__leer{display:none;}
.ob-archiv.is-enhanced .ob-eintrag{display:none;margin-bottom:22px;}
.ob-archiv.is-enhanced .ob-eintrag.is-active{display:grid;}

/* Übergänge */
.ob-archiv.is-enhanced .ob-archiv__detail[data-dir="next"] .ob-eintrag.is-active{animation:ob-eintrag-in-r .3s ease;}
.ob-archiv.is-enhanced .ob-archiv__detail[data-dir="prev"] .ob-eintrag.is-active{animation:ob-eintrag-in-l .3s ease;}
.ob-archiv.is-enhanced .ob-archiv__grid.is-entering{animation:ob-archiv-grid-in .3s ease;}
@keyframes ob-eintrag-in-r{from{opacity:0;transform:translateX(36px);}to{opacity:1;transform:none;}}
@keyframes ob-eintrag-in-l{from{opacity:0;transform:translateX(-36px);}to{opacity:1;transform:none;}}
@keyframes ob-archiv-grid-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion: reduce){
	.ob-archivkarte,.ob-archivkarte:hover,.ob-archivkarte:focus-visible{transition:none;transform:none;}
	.ob-archivkarte__bild img{transition:none;}
	.ob-archiv.is-enhanced .ob-archiv__detail[data-dir] .ob-eintrag.is-active,
	.ob-archiv.is-enhanced .ob-archiv__grid.is-entering{animation:none;}
}

/* ---------- Responsiv ---------- */
@media (max-width: 1000px){
	.ob-archiv__grid{grid-template-columns:repeat(2,1fr);}
	.ob-eintrag{grid-template-columns:1fr;}
	.ob-eintrag__media{border-right:0;border-bottom:2px solid var(--ob-ink);}
	.ob-eintrag__body{padding:24px 22px 24px 34px;}
}
@media (max-width: 560px){
	.ob-archiv__grid{grid-template-columns:1fr;gap:20px;}
	.ob-archiv__detailbar{justify-content:center;}
}