/*! cr-bildnachweis | Quelle: 06j-bildnachweis.css */
@layer components {
.crd {
position: absolute; right: 0.5rem; bottom: 0.5rem; z-index: 4; display: inline-flex; flex-direction: row-reverse; align-items: center;
block-size: 1.2rem; min-inline-size: 1.2rem; padding: 0; margin: 0; border: 0; border-radius: 999px;
background: color-mix(in oklab, var(--accent, #007cc3) 82%, #000); color: var(--on-accent, #fff);
box-shadow: 0 0 0 1px rgb(255 255 255 / .55), 0 2px 6px rgb(0 0 0 / .28);
font: 700 0.7rem/1 var(--font-text); letter-spacing: 0.01em; cursor: help; opacity: 0.72;
transition: opacity 200ms, box-shadow 200ms; -webkit-tap-highlight-color: transparent;
}
.crd::before { content: ""; position: absolute; inset: -0.45rem; } 
.crd__i { inline-size: 1.2rem; display: grid; place-items: center; font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 0.78rem; }
.crd__t { max-inline-size: 0; overflow: hidden; white-space: nowrap; transition: max-inline-size 320ms var(--ease-out), padding 320ms var(--ease-out); }
.crd:hover, .crd:focus-visible, .crd.is-open { opacity: 1; }
.crd:hover .crd__t, .crd:focus-visible .crd__t, .crd.is-open .crd__t { max-inline-size: 16rem; padding-inline-start: 0.6rem; }
.crd:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media print { .crd { display: none; } }
}
@layer pages {
.bn-sum { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-s); }
.bn-sum li { margin: 0; display: grid; gap: 0.1rem; padding: 0.9rem 1.2rem; border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); min-inline-size: 9rem; }
.bn-sum b { font-family: var(--font-display); font-size: var(--step-3); line-height: 1; color: var(--accent-ink); }
.bn-sum span { color: var(--ink-2); font-size: 0.9rem; }
.bn-filter { display: flex; align-items: center; gap: 0.6rem; padding: 0 1rem; border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--surface); max-inline-size: 34rem; }
.bn-filter:focus-within { border-color: var(--accent); }
.bn-filter svg { inline-size: 1.2rem; color: var(--ink-2); }
.bn-filter input { flex: 1; min-inline-size: 0; min-block-size: 3rem; border: 0; background: none; font: inherit; color: var(--ink); outline: none; }
.bn-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.bn-row { margin: 0; display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: center; padding: 0.5rem; padding-inline-end: 1rem; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--line); }
.bn-row[hidden] { display: none; }
.bn-row__img { grid-row: span 2; position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--r-m) - 4px); overflow: hidden; background: var(--img-color); }
.bn-row__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.bn-row__main { display: grid; gap: 0.1rem; min-inline-size: 0; }
.bn-row__name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; font-weight: 600; overflow-wrap: anywhere; }
.bn-row__credit { font-weight: 700; }
.bn-row__count { font-size: 0.88rem; color: var(--ink-2); text-align: end; white-space: nowrap; }
.bn-row__count b { color: var(--accent-ink); font-size: 1.05rem; }
.bn-row__pages { grid-column: 2 / -1; font-size: 0.88rem; }
.bn-row__pages summary { cursor: pointer; color: var(--accent-ink); font-weight: 700; inline-size: fit-content; }
.bn-row__pages ul { list-style: none; padding: 0.4rem 0 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.5rem; }
.bn-row__pages li { margin: 0; }
.bn-row__pages a { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--r-pill); background: var(--bg-alt); color: var(--ink); text-decoration: none; }
.bn-row__pages a:hover { background: var(--accent-tint); }
@media (width < 34rem) { .bn-row { grid-template-columns: 4rem minmax(0, 1fr); } .bn-row__count { grid-column: 2; text-align: start; } }
.bn-mini { display: grid; gap: var(--space-s); margin-block: 1em; }
.bn-mini__i { display: inline-grid; place-items: center; inline-size: 1.15rem; block-size: 1.15rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font: italic 700 0.75rem/1 Georgia, serif; vertical-align: 0.1em; }
.bn-mini__grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); }
.bn-mini__grid li { margin: 0; display: grid; gap: 0.35rem; font-size: 0.85rem; }
.bn-mini__grid li > span:last-child { display: grid; }
.bn-mini__grid small { color: var(--ink-2); }
.bn-mini__img { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-m); overflow: hidden; background: var(--img-color); }
.bn-mini__img img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
}