/* Forever-Wiki - Seite Library Books */

.lb-oben {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap:                   1rem;
    margin:                1rem 0 1.5rem;
}

.bibliothekar h3 {
    margin: 0 0 0.2rem;
}

.bibliothekar .fraktion {
    font-size:      0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          var(--akzent);
}

/* ---- Fortschritt ------------------------------------------------------- */

.fortschritt {
    position: sticky;
    top:      calc(var(--kopf-hoehe, 3.5rem) + 0.4rem);
    z-index:  10;
    margin:   0 0 1rem;
}

.fortschritt-text {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    gap:             0.2rem 1rem;
    margin-bottom:   0.5rem;
}

.fortschritt-text strong {
    font-family: var(--serif);
    font-size:   1.15rem;
}

.balken {
    position:      relative;
    height:        0.9rem;
    background:    var(--bg);
    border:        1px solid var(--rand-hell);
    border-radius: 999px;
    margin:        0 0 1.6rem;
}

.balken-fuellung {
    position:      absolute;
    inset:         0 auto 0 0;
    width:         0;
    border-radius: 999px;
    background:    linear-gradient(90deg, var(--akzent), var(--rubrik));
    transition:    width 0.25s ease;
}

.balken-marke {
    position:    absolute;
    top:         -4px;
    bottom:      -4px;
    width:       2px;
    background:  var(--text);
    opacity:     0.75;
}

.balken-marke span {
    position:    absolute;
    top:         calc(100% + 2px);
    left:        50%;
    transform:   translateX(-50%);
    font-size:   0.75rem;
    color:       var(--text-2);
    white-space: nowrap;
}

.marke-10 {
    left: 40%;
}

.marke-20 {
    left: 80%;
}

.marke-25 {
    left: calc(100% - 2px);
}

.marke-25 span {
    left:      auto;
    right:     0;
    transform: none;
}

.stufen {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        0.4rem;
}

.stufen li {
    font-size:     0.85rem;
    border:        1px solid var(--rand);
    border-radius: 999px;
    padding:       0.1rem 0.6rem;
    color:         var(--text-2);
}

.stufen li.erreicht {
    color:        var(--ok);
    border-color: var(--ok);
    background:   var(--ok-bg);
}

/* ---- Filter ------------------------------------------------------------ */

.filter {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
    gap:                   0.7rem;
    align-items:           end;
    margin:                0 0 0.6rem;
}

.filter label {
    display:   block;
    font-size: 0.85rem;
    color:     var(--text-2);
}

.filter select,
.filter input[type="search"] {
    font:          inherit;
    font-size:     0.95rem;
    width:         100%;
    margin-top:    0.2rem;
    color:         var(--text);
    background:    var(--flaeche);
    border:        1px solid var(--rand);
    border-radius: 6px;
    padding:       0.4rem 0.5rem;
}

.filter-zeile {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    align-items:     center;
    gap:             0.5rem;
    margin:          0 0 1.2rem;
    color:           var(--text-2);
    font-size:       0.92rem;
}

.filter-zeile .knoepfe {
    display: flex;
    gap:     0.4rem;
}

/* ---- Liste ------------------------------------------------------------- */

.kontinent > h2 {
    display:     flex;
    flex-wrap:   wrap;
    align-items: baseline;
    gap:         0.2rem 0.8rem;
}

.kontinent > h2 small,
.gebiet-kopf small {
    font-family: var(--sans);
    font-size:   0.9rem;
    font-weight: 400;
    color:       var(--text-2);
}

.gebiet {
    margin: 0 0 1rem;
}

.gebiet-kopf {
    display:         flex;
    flex-wrap:       wrap;
    justify-content: space-between;
    align-items:     baseline;
    gap:             0.2rem 1rem;
    margin:          0 0 0.6rem;
}

.gebiet-kopf h3 {
    margin: 0;
}

.gebiet-kopf.fertig h3::after {
    content:     " ✓";
    color:       var(--ok);
}

.gebiet-inhalt {
    display:               grid;
    grid-template-columns: 9.5rem 1fr;
    gap:                   1rem;
    align-items:           start;
}

@media (max-width: 34rem) {
    .gebiet-inhalt {
        grid-template-columns: 1fr;
    }

    .skizze {
        max-width: 11rem;
    }
}

.skizze {
    margin: 0;
}

.skizze svg {
    display:       block;
    width:         100%;
    height:        auto;
    background:    var(--bg);
    border:        1px solid var(--rand-hell);
    border-radius: 6px;
}

.skizze figcaption {
    font-size:  0.75rem;
    color:      var(--text-2);
    margin-top: 0.25rem;
    line-height: 1.35;
}

.skizze-leer {
    display:       flex;
    align-items:   center;
    justify-content: center;
    aspect-ratio:  1;
    padding:       0.6rem;
    text-align:    center;
    font-size:     0.8rem;
    color:         var(--text-2);
    border:        1px dashed var(--rand-hell);
    border-radius: 6px;
}

.sk-gitter {
    stroke:       var(--gitter);
    stroke-width: 0.4;
}

.sk-achse {
    stroke:       var(--rand-hell);
    stroke-width: 0.6;
}

.sk-punkt {
    fill:         var(--rubrik);
    stroke:       var(--bg);
    stroke-width: 0.8;
}

.sk-punkt.erledigt {
    fill: var(--ok);
}

.sk-punkt.hervor {
    stroke:       var(--text);
    stroke-width: 1.4;
}

.sk-zahl {
    font-family: var(--sans);
    font-size:   6px;
    font-weight: 700;
    fill:        var(--text);
}

.buchliste {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    grid;
    gap:        0.5rem;
}

.buch {
    display:       grid;
    grid-template-columns: auto 1fr;
    gap:           0.7rem;
    padding:       0.65rem 0.8rem;
    background:    var(--flaeche-2);
    border:        1px solid var(--rand);
    border-radius: 8px;
}

.buch.erledigt {
    opacity: 0.7;
}

.buch.erledigt .buch-name {
    text-decoration: line-through;
    text-decoration-color: var(--ok);
}

.buch.aufblitzen {
    border-color: var(--akzent);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--akzent) 40%, transparent);
}

.haken input {
    width:        1.35rem;
    height:       1.35rem;
    margin:       0.1rem 0 0;
    accent-color: var(--ok);
    cursor:       pointer;
}

.buch-kopf {
    display:     flex;
    flex-wrap:   wrap;
    align-items: baseline;
    gap:         0.2rem 0.5rem;
}

.buch-nr {
    font-family: var(--mono);
    font-size:   0.8rem;
    color:       var(--text-2);
}

.buch-name {
    font-family: var(--serif);
    font-size:   1.05rem;
}

.buch-daten {
    display:   flex;
    flex-wrap: wrap;
    gap:       0.1rem 1.2rem;
    margin:    0.25rem 0 0;
    font-size: 0.92rem;
    color:     var(--text-2);
}

.buch-daten div {
    display: flex;
    gap:     0.35rem;
}

.buch-daten dt {
    font-weight: 600;
}

.buch-daten dd {
    margin: 0;
    color:  var(--text);
}

.buch-extra {
    margin:    0.35rem 0 0;
    font-size: 0.88rem;
    color:     var(--text-2);
}

.leer-meldung {
    padding:    1rem;
    text-align: center;
    color:      var(--text-2);
}

.quellen li {
    margin-bottom: 0.3rem;
}