/* The library /bibliothek (assets/js/app/library.js): the entries with their references, then the
   general literature. It flows from the top; the topic buttons and an index sit in the right column. */

html:has(.library) { scroll-behavior: smooth; }

.library {
  display: flow-root; padding: 61px 0 140px var(--gut);
  background: var(--dark); color: #fff; --side: #373737; --rule: rgba(255, 255, 255, .16);
}
.library .side { top: var(--a); }
.library .body { margin-top: 60px; width: min(715px, var(--main)); font-size: 20px; line-height: normal; }
.library .lib-intro { margin-bottom: 72px; }
.library .lib-intro p { margin: 0 0 26px; }
.library .lib-empty { font-style: italic; opacity: .55; }
.library [id] { scroll-margin-top: 24px; }

/* the topic buttons filter the library; the others step back while one is chosen */
.library .btn.active { box-shadow: 0 0 0 3px var(--dark), 0 0 0 5px #fff; }
.library .btn.dim { opacity: .45; }
.library .btn.dim:hover, .library .btn.dim:focus-visible { opacity: .8; }

/* index in the right column, below the topic buttons: jumps to the blocks of the page */
.lib-index { margin-top: 20px; font-size: 15px; line-height: 1.3; border-top: 2px solid #fff; }
.lib-index a { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--rule); transition: opacity .2s ease, padding .2s ease; }
.lib-index a.top { font-weight: 700; padding-top: 12px; }
.lib-index a.sub { padding-left: 18px; }
.lib-index a:hover { opacity: .7; }
.lib-index a.sub:hover { padding-left: 24px; }
.lib-index .dot { flex: none; width: 9px; height: 9px; transform: rotate(45deg); background: var(--c); }
.lib-index .dot.yellow { --c: var(--yellow); }
.lib-index .dot.purple { --c: var(--purple); }
.lib-index .dot.brown  { --c: var(--brown); }
.lib-index-h { margin: 0; padding: 12px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

/* the two parts: big number, title, count, heavy rule */
.lib-part { margin-bottom: 88px; }
.lib-part-head { display: flex; align-items: baseline; gap: 18px; padding-bottom: 14px; margin-bottom: 36px; border-bottom: 2px solid #fff; }
.lib-part-head h2 { flex: 1; margin: 0; font-size: 32px; font-weight: 700; font-style: italic; line-height: 1.1; }
.lib-part-no { font-size: 15px; font-weight: 700; letter-spacing: .08em; opacity: .55; }
.lib-count { flex: none; font-size: 12px; font-weight: 400; font-style: normal; letter-spacing: .04em; opacity: .6; }

/* part 1: one colour band per topic, the points under it with their diamond */
.lib-topic { margin-bottom: 52px; }
.lib-band {
  display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 16px; margin: 0 0 8px;
  font-size: 16px; font-weight: 700; letter-spacing: .04em; background: var(--c); color: var(--on);
}
.lib-band span { font-size: 12px; font-weight: 400; opacity: .8; }
.lib-yellow { --c: var(--yellow); --on: var(--purple); }
.lib-purple { --c: var(--purple); --on: var(--yellow); }
.lib-brown  { --c: var(--brown);  --on: #fff; }
.lib-point { padding: 20px 0 6px; }
.lib-point + .lib-point { border-top: 1px solid var(--rule); }
.lib-point .lib-refs { margin-left: 44px; }
.lib-point .lib-refs li { padding-top: 6px; padding-bottom: 6px; }
.lib-point .lib-refs li::before { top: 16px; }
.lib-point-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; transition: opacity .2s ease; }
.lib-point-head:hover { opacity: .75; }
/* the 52px diamond scaled to 70 %, as in the menu */
.lib-point-head .icon { position: relative; flex: none; margin: -8px -10px -8px -8px; transform: scale(.7); }
.lib-point-title { flex: 1; min-width: 0; font-size: 20px; line-height: 1.3; }
.lib-point-title b { font-style: italic; }
/* admins: who wrote the point */
.lib-author { display: block; font-size: 14px; font-style: normal; letter-spacing: .02em; opacity: .65; }
.lib-norefs { margin: 0 0 12px 44px; font-size: 15px; font-style: italic; opacity: .5; }

/* bibliography lists: hanging entries with a thin coloured mark on the left */
.lib-refs { list-style: none; margin: 0; padding: 0; font-size: 17px; line-height: 1.5; }
.lib-refs li { position: relative; padding: 10px 0 10px 24px; overflow-wrap: anywhere; }
.lib-refs li::before { content: ""; position: absolute; left: 4px; top: 20px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--c, #fff); opacity: .9; }
.lib-refs b, .lib-refs strong { font-weight: 700; }   /* **fett** typed by the authors */
.lib-refs em, .lib-refs i { font-style: italic; }       /* *kursiv* */
.lib-refs a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; transition: text-decoration-color .2s ease; }
.lib-refs a:hover { text-decoration-color: #fff; }
.lib-ext { display: inline-block; width: 13px; height: 13px; margin-left: 6px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }

/* part 2: numbered groups, entries divided by thin rules */
.lib-group { margin-bottom: 44px; }
.lib-group-h {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .45); font-size: 20px; font-weight: 700; line-height: 1.3;
}
.lib-group-h .lib-no { flex: none; width: 26px; font-size: 13px; color: var(--yellow); letter-spacing: .06em; }
.lib-group-h .lib-count { margin-left: auto; }
.lib-group .lib-refs li { border-bottom: 1px solid var(--rule); padding-left: 40px; }
.lib-group .lib-refs li::before { left: 6px; background: var(--yellow); opacity: .7; }