/* ---------------------------------------------------------------------------
 * assets/css/sammlung.css - Sammlungsmodul (/sammlung)
 *
 * Eigene Datei und nicht Tailwind-Klassen im Template, aus dem Grund, der
 * in CLAUDE.md steht: assets/css/tailwind.css ist ein gepurgter Build und
 * liegt nicht in Git. Jede Klasse, die im letzten lokalen Build nicht
 * vorkam, existiert auf DEV nicht - das Element wird dann ohne Farbe
 * gerendert, ohne Fehler und ohne Konsolenmeldung. Fuer einen klar
 * abgegrenzten neuen UI-Block ist eine eigene, nicht gepurgte Datei der
 * robustere Weg (wie assets/css/partner.css).
 *
 * Optik bewusst uebernommen von assets/css/sammelgebiete.css (cq-obj-*,
 * cq-sg-*): dieselben Radien, Farben, Abstaende und dieselbe Kachel-
 * sprache. Die Sammlung soll aussehen wie der Rest des Objektbereichs,
 * nicht wie ein zweites Produkt.
 * ------------------------------------------------------------------------- */

.cq-slg {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 0 3rem;
    color: #111827;
}

.cq-slg-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.cq-slg-kopf h1 {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
}

.cq-slg-kopf p {
    margin: .25rem 0 0;
    color: #6b7280;
    font-size: .9rem;
}

.cq-slg-kopf-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

/* --- Kennzahlen ------------------------------------------------------- */

.cq-slg-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.cq-slg-zahl {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: .9rem 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.cq-slg-zahl b {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
}

.cq-slg-zahl span {
    display: block;
    margin-top: .15rem;
    font-size: .78rem;
    color: #6b7280;
}

/* Die Dublettenkachel ist ein Hinweis, keine Warnung: Dubletten sind im
   Sammeln der Normalfall und die Grundlage jedes Tauschs. */
.cq-slg-zahl--dublette b { color: #b45309; }

/* --- Auswertung ------------------------------------------------------- */

.cq-slg-auswertung {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: .75rem;
    margin-bottom: 1.5rem;
}

.cq-slg-box {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.cq-slg-box h2 {
    font-size: .95rem;
    font-weight: 700;
    margin: 0 0 .15rem;
}

.cq-slg-box-hinweis {
    margin: 0 0 .75rem;
    font-size: .78rem;
    color: #6b7280;
}

.cq-slg-fortschritt + .cq-slg-fortschritt {
    margin-top: .8rem;
}

.cq-slg-fortschritt-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    font-size: .85rem;
    margin-bottom: .3rem;
}

.cq-slg-fortschritt-kopf span:last-child {
    color: #6b7280;
    font-size: .78rem;
    white-space: nowrap;
}

.cq-slg-balken {
    height: .5rem;
    border-radius: 999px;
    background: #f3f4f6;
    overflow: hidden;
}

.cq-slg-balken i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #1d4ed8;
}

/* Farbe je Sammelgebiet - dieselben Werte wie die Chip-Punkte in
   sammelgebiete.css, damit ein Gebiet ueberall gleich aussieht. */
.cq-slg-balken i.cq-slg-balken--pressmuenze { background: #b45309; }
.cq-slg-balken i.cq-slg-balken--schein      { background: #7c3aed; }
.cq-slg-balken i.cq-slg-balken--memodaille  { background: #0f766e; }

.cq-slg-verteilung {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cq-slg-verteilung li {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .25rem 0;
    font-size: .85rem;
}

.cq-slg-verteilung li > span:first-child {
    min-width: 6.5rem;
    color: #374151;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cq-slg-verteilung li > i {
    flex: 1 1 auto;
    height: .4rem;
    border-radius: 999px;
    background: #e5e7eb;
    position: relative;
    overflow: hidden;
}

.cq-slg-verteilung li > i > b {
    position: absolute;
    inset: 0 auto 0 0;
    background: #1d4ed8;
    border-radius: 999px;
}

.cq-slg-verteilung li > em {
    font-style: normal;
    font-size: .78rem;
    color: #6b7280;
    min-width: 2rem;
    text-align: right;
}

/* --- Filterleiste ----------------------------------------------------- */

.cq-slg-filter {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    margin-bottom: 1rem;
}

.cq-slg-filter-reihe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: .75rem;
}

.cq-slg-feld label {
    display: block;
    font-size: .78rem;
    color: #374151;
    margin-bottom: .25rem;
}

.cq-slg-feld input,
.cq-slg-feld select {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    padding: .5rem .65rem;
    font-size: .875rem;
    background: #fff;
    color: #111827;
}

.cq-slg-feld input:focus,
.cq-slg-feld select:focus {
    outline: 2px solid #bfdbfe;
    outline-offset: 0;
    border-color: #60a5fa;
}

.cq-slg-filter-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .85rem;
}

.cq-slg-knopf {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border-radius: .5rem;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    padding: .45rem .8rem;
    font-size: .85rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.cq-slg-knopf:hover { background: #f3f4f6; }

.cq-slg-knopf--primaer {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.cq-slg-knopf--primaer:hover { background: #1e40af; }

.cq-slg-knopf--still {
    border-color: transparent;
    color: #6b7280;
}

/* Ansichtsumschalter Grid/Tabelle - Optik wie in /muenzen. */
.cq-slg-ansicht {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    overflow: hidden;
}

.cq-slg-ansicht a {
    padding: .45rem .7rem;
    font-size: .8rem;
    text-decoration: none;
    color: #374151;
    background: #fff;
}

.cq-slg-ansicht a:hover { background: #f9fafb; }

.cq-slg-ansicht a[aria-current="true"] {
    background: #111827;
    color: #fff;
}

.cq-slg-treffer {
    font-size: .85rem;
    color: #6b7280;
    margin: 0 0 .75rem;
}

/* --- Kacheln ---------------------------------------------------------- */

.cq-slg-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: .9rem;
}

.cq-slg-karte {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.cq-slg-karte:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }

.cq-slg-karte-bild {
    display: block;
    aspect-ratio: 4 / 3;
    background: #f3f4f6;
    overflow: hidden;
}

.cq-slg-karte-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cq-slg-karte-bild-leer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #9ca3af;
}

.cq-slg-karte-text {
    padding: .7rem .8rem .8rem;
    display: flex;
    flex-direction: column;
    gap: .3rem;
    flex: 1 1 auto;
}

.cq-slg-karte-titel {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
    color: #111827;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.cq-slg-karte-titel:hover { text-decoration: underline; }

.cq-slg-karte-ort {
    font-size: .75rem;
    color: #6b7280;
}

.cq-slg-karte-marken {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: .1rem;
}

.cq-slg-marke {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .7rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    white-space: nowrap;
}

.cq-slg-marke--exemplar { background: #dcfce7; color: #166534; }
.cq-slg-marke--dublette { background: #fef3c7; color: #92400e; }
.cq-slg-marke--offen    { background: #f3f4f6; color: #6b7280; }

.cq-slg-punkt {
    width: .5rem;
    height: .5rem;
    border-radius: 999px;
    background: #9ca3af;
    flex: 0 0 auto;
}

.cq-slg-punkt--pressmuenze { background: #b45309; }
.cq-slg-punkt--schein      { background: #7c3aed; }
.cq-slg-punkt--memodaille  { background: #0f766e; }

.cq-slg-karte-fuss {
    margin-top: auto;
    padding-top: .55rem;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.cq-slg-karte-fuss .cq-slg-knopf {
    padding: .3rem .55rem;
    font-size: .75rem;
}

/* --- Exemplare (aufklappbar in der Kachel und in der Tabelle) ---------- */

.cq-slg-exemplare {
    border-top: 1px solid #f3f4f6;
    padding: .6rem .8rem .8rem;
    background: #fafafa;
}

.cq-slg-exemplare > summary {
    cursor: pointer;
    font-size: .78rem;
    color: #374151;
    list-style: none;
}

.cq-slg-exemplare > summary::-webkit-details-marker { display: none; }

.cq-slg-exemplare > summary::before {
    content: "▸ ";
    color: #9ca3af;
}

.cq-slg-exemplare[open] > summary::before { content: "▾ "; }

.cq-slg-exemplar-liste {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.cq-slg-exemplar {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .4rem .55rem;
    font-size: .75rem;
    color: #374151;
}

.cq-slg-exemplar-felder {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .6rem;
    flex: 1 1 auto;
}

.cq-slg-exemplar-feld b {
    font-weight: 600;
    color: #111827;
}

.cq-slg-exemplar-notiz {
    flex: 1 1 100%;
    color: #6b7280;
    overflow-wrap: anywhere;
}

.cq-slg-exemplar-weg {
    border: 0;
    background: none;
    color: #dc2626;
    cursor: pointer;
    font-size: .8rem;
    line-height: 1;
    padding: .15rem .25rem;
}

.cq-slg-exemplar-weg:hover { text-decoration: underline; }

.cq-slg-exemplar-form {
    margin-top: .6rem;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.cq-slg-exemplar-form select,
.cq-slg-exemplar-form input {
    width: 100%;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    padding: .4rem .55rem;
    font-size: .78rem;
    background: #fff;
    color: #111827;
}

.cq-slg-exemplar-form label {
    font-size: .72rem;
    color: #6b7280;
}

/* --- Tabelle ---------------------------------------------------------- */

.cq-slg-tabelle-rahmen {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow-x: auto;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.cq-slg-tabelle {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.cq-slg-tabelle th {
    text-align: left;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: #6b7280;
    background: #f9fafb;
    padding: .6rem .8rem;
    white-space: nowrap;
}

.cq-slg-tabelle td {
    padding: .6rem .8rem;
    border-top: 1px solid #f3f4f6;
    vertical-align: top;
}

.cq-slg-tabelle tbody tr:hover { background: #f9fafb; }

.cq-slg-tabelle a { color: #1d4ed8; text-decoration: none; }
.cq-slg-tabelle a:hover { text-decoration: underline; }

.cq-slg-tabelle .cq-slg-exemplare {
    border-top: 0;
    background: transparent;
    padding: 0;
}

/* --- Blaetterung ------------------------------------------------------ */

.cq-slg-seiten {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.25rem;
    font-size: .85rem;
}

.cq-slg-seiten a,
.cq-slg-seiten span {
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    padding: .35rem .7rem;
    color: #374151;
    text-decoration: none;
}

.cq-slg-seiten a:hover { background: #f9fafb; }
.cq-slg-seiten span.cq-slg-aus { opacity: .4; }
.cq-slg-seiten span.cq-slg-stand { border: 0; color: #6b7280; }

/* --- Leerzustaende ---------------------------------------------------- */

.cq-slg-leer {
    background: #fff;
    border: 1px dashed #d1d5db;
    border-radius: .75rem;
    padding: 2rem 1.25rem;
    text-align: center;
    color: #6b7280;
}

.cq-slg-leer strong {
    display: block;
    font-size: 1rem;
    color: #111827;
    margin-bottom: .35rem;
}

.cq-slg-leer p { margin: 0 0 1rem; font-size: .88rem; }

/* --- Teaser im Profil ------------------------------------------------- */

.cq-slg-teaser {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem 1.15rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.cq-slg-teaser-zahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.cq-slg-teaser-zahl b {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
}

.cq-slg-teaser-zahl span {
    font-size: .75rem;
    color: #6b7280;
}

@media (max-width: 640px) {
    .cq-slg-kopf { align-items: flex-start; }
    .cq-slg-zahl b { font-size: 1.35rem; }
}