/* ============================================================
   Sammelgebiete: Objektseite, Filter, Merkmale, Exemplare
   ------------------------------------------------------------
   WARUM eine eigene Datei und nicht Tailwind-Utilities:

   assets/css/tailwind.css ist ein gepurgter Build und liegt NICHT
   in Git. Erzeugt wird sie vom CI-Job build_css, der erst beim
   Deploy nach INT laeuft - auf DEV landet der lokale Stand. Jede
   Tailwind-Klasse, die im letzten lokalen Build nicht vorkam,
   existiert auf DEV also schlicht nicht. Das Element rendert dann
   ohne Hintergrund und Farbe, ohne Fehler und ohne Konsolen-
   meldung.

   Diese Datei liegt in Git, wird nicht gepurgt und ist damit fuer
   neue, klar abgegrenzte UI-Bloecke der robustere Weg - genauso
   wie assets/css/partner.css fuer die Partner-Ansichten.

   Praefix cq-sg-* fuer alles hier, damit nichts mit Tailwind oder
   den Album-Styles kollidiert.
   ============================================================ */

/* --- Sammelgebiets-Chips (Filter und Anzeige) ---------------- */

.cq-sg-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
}

.cq-sg-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .7rem;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    background: #fff;
    color: #374151;
    font-size: .85rem;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    transition: background-color .12s, border-color .12s, color .12s;
}

.cq-sg-chip:hover {
    background: #f3f4f6;
}

.cq-sg-chip--active {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff;
}

.cq-sg-chip--active:hover {
    background: #1e40af;
}

/* Die Checkbox traegt den Zustand fuer Formular und Tastatur, die
   Optik macht das Label. Sichtbar bleibt sie fuer Screenreader. */
.cq-sg-chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Tastaturbedienung muss sichtbar bleiben. */
.cq-sg-chip input:focus-visible + span {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
    border-radius: 3px;
}

/* Farbpunkt je Sammelgebiet - macht Kombistandorte auf der Karte
   und in Listen unterscheidbar (Story 2). */
.cq-sg-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 9999px;
    background: #9ca3af;
    flex: 0 0 auto;
}

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


/* --- Objektseite -------------------------------------------- */

.cq-sg-objekt {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .cq-sg-objekt {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.cq-sg-bilder {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.cq-sg-bild {
    flex: 1 1 12rem;
    max-width: 100%;
}

.cq-sg-bild img {
    width: 100%;
    height: auto;
    border-radius: .5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.cq-sg-bild figcaption {
    margin-top: .35rem;
    font-size: .8rem;
    color: #6b7280;
}

/* Katalogdaten als Definitionsliste. Story 3 verlangt, dass die
   Tiefe einen Gelegenheitsbesucher nicht ueberfaehrt - deshalb
   ruhig gesetzt und klar unter dem Bild, nicht davor. */
.cq-sg-daten {
    margin: 0;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: .35rem 1rem;
    font-size: .95rem;
}

.cq-sg-daten dt {
    color: #6b7280;
}

.cq-sg-daten dd {
    margin: 0;
    color: #111827;
}

/* Fehlende Angabe ist bei Souvenir Medaillen der Normalfall (kein Jahr,
   keine Auflage) und darf nicht wie ein Datenfehler aussehen. */
.cq-sg-leer {
    color: #9ca3af;
    font-style: italic;
}


/* --- Merkmale ----------------------------------------------- */

.cq-sg-merkmale {
    margin-top: 1.5rem;
}

.cq-sg-merkmal-gruppe {
    margin-bottom: .9rem;
}

.cq-sg-merkmal-titel {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6b7280;
    margin-bottom: .35rem;
}

.cq-sg-merkmal-werte {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.cq-sg-wert {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    padding: .15rem .55rem;
    border: 1px solid #e5e7eb;
    border-radius: .35rem;
    background: #f9fafb;
    font-size: .85rem;
}

.cq-sg-wert code {
    font-weight: 600;
    color: #1f2937;
}

.cq-sg-wert small {
    color: #6b7280;
}


/* --- Bezugsquellen ------------------------------------------ */

.cq-sg-quellen {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cq-sg-quelle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .6rem 0;
    border-bottom: 1px solid #f3f4f6;
}

.cq-sg-quelle:last-child {
    border-bottom: 0;
}

.cq-sg-quelle-name {
    font-weight: 600;
    color: #1f2937;
}

.cq-sg-badge {
    display: inline-block;
    padding: .1rem .45rem;
    border-radius: .25rem;
    font-size: .75rem;
    background: #f3f4f6;
    color: #4b5563;
}

.cq-sg-badge--warn   { background: #fef3c7; color: #92400e; }
.cq-sg-badge--danger { background: #fee2e2; color: #991b1b; }
.cq-sg-badge--info   { background: #dbeafe; color: #1e40af; }

/* Story 3: eine Ausgabe ohne aktive Bezugsquelle verschwindet
   nicht, sie wird nur ausgewiesen und verweist auf den Marktplatz. */
.cq-sg-hinweis {
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
    padding: .75rem 1rem;
    border-radius: .25rem;
    font-size: .9rem;
    color: #78350f;
}

.cq-sg-hinweis a {
    color: #92400e;
    text-decoration: underline;
}


/* --- Exemplare in der Sammlung ------------------------------ */

.cq-sg-exemplare {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

.cq-sg-exemplar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .45rem .6rem;
    border: 1px solid #e5e7eb;
    border-radius: .35rem;
    margin-bottom: .4rem;
    font-size: .85rem;
    background: #fff;
}

.cq-sg-exemplar-feld {
    color: #4b5563;
}

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


/* --- Weitere Ausgaben desselben Motivs ---------------------- */

.cq-sg-verwandte {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: .5rem;
}

.cq-sg-verwandte a {
    display: block;
    width: 7rem;
    text-decoration: none;
    color: inherit;
}

.cq-sg-verwandte img {
    width: 100%;
    height: auto;
    border-radius: .35rem;
    border: 1px solid #e5e7eb;
}

.cq-sg-verwandte span {
    display: block;
    margin-top: .25rem;
    font-size: .75rem;
    color: #4b5563;
    overflow-wrap: anywhere;
}


/* --- Melde-Buttons ------------------------------------------
   Eigene Klasse statt bg-orange-500: diese Farbfamilie kommt im
   aktuellen gepurgten Tailwind-Build nicht vor, der Button waere
   auf DEV also unsichtbar (nur der Schatten bliebe). Geometrie
   und Typografie kommen weiterhin von den Tailwind-Klassen am
   Element, hier stehen nur die Farben. */

.cq-sg-btn-soldout {
    background-color: #ea580c;
    color: #fff;
}

.cq-sg-btn-soldout:hover {
    background-color: #c2410c;
}


/* ============================================================
   OBJEKTSEITE (Ausgabe)
   ------------------------------------------------------------
   Eigenes Layout statt Tailwind-Utilities: die Seite ist der
   Ort, an dem CoinQuest als ernsthafte Katalogreferenz auftritt.
   Das braucht mehr Gestaltung als sich aus dem gepurgten Build
   zusammensetzen laesst - und die Datei hier liegt in Git.

   Leitgedanke: bei einem Schein IST das Bild das Produkt. Also
   Bilder gross und zuerst, Katalogtiefe darunter ruhig gesetzt.
   Story 3 verlangt ausdruecklich, dass ein Gelegenheitsbesucher
   davon nicht erschlagen wird.
   ============================================================ */

.cq-obj {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem;
}

/* --- Kopfzeile --------------------------------------------- */

.cq-obj-pfad {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    font-size: .85rem;
    color: #6b7280;
    margin-bottom: .75rem;
}

.cq-obj-pfad a { color: #4b5563; text-decoration: none; }
.cq-obj-pfad a:hover { text-decoration: underline; }

.cq-obj-titel {
    font-size: 1.9rem;
    line-height: 1.15;
    font-weight: 700;
    color: #111827;
    margin: 0 0 .35rem;
    overflow-wrap: anywhere;
}

/* Die Zeile, die der Sammler zuerst scannt: Katalognummer, Land,
   Jahr. Bewusst monospaced fuer die Nummer - sie ist ein Code. */
.cq-obj-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    color: #6b7280;
    font-size: .95rem;
    margin-bottom: 1.25rem;
}

.cq-obj-meta code {
    font-weight: 600;
    color: #1f2937;
    background: #f3f4f6;
    padding: .1rem .45rem;
    border-radius: .3rem;
}


/* --- Hauptbereich: Bilder | Seitenspalte -------------------- */

.cq-obj-haupt {
    display: grid;
    gap: 1.75rem;
    align-items: start;
}

@media (min-width: 900px) {
    .cq-obj-haupt {
        grid-template-columns: minmax(0, 1fr) 20rem;
    }
}

/* --- Abbildungen ------------------------------------------- */

.cq-obj-bilder {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.cq-obj-bild {
    margin: 0;
}

/* Fester Rahmen mit Seitenverhaeltnis: Scheine sind quer,
   Souvenir Medaillen rund. Ohne feste Hoehe springt das Layout je
   nach Sammelgebiet. */
.cq-obj-bild-rahmen {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 3:2 statt 4:3 - ein Schein ist etwa 2:1, eine Souvenir Medaille rund.
       4:3 liess ueber und unter dem Schein sichtbar Luft stehen. */
    aspect-ratio: 3 / 2;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    overflow: hidden;
    padding: .6rem;
}

.cq-obj-bild-rahmen img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cq-obj-bild figcaption {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .4rem;
    margin-top: .5rem;
    font-size: .85rem;
    color: #6b7280;
}

.cq-obj-bild figcaption code {
    font-weight: 600;
    color: #374151;
}

/* Platzhalter, wenn zu einer Seite kein Bild vorliegt. Ehrlicher
   als ein leerer Kasten - der Sammler weiss dann, dass das Bild
   fehlt und nicht die Seite kaputt ist. */
.cq-obj-bild-leer {
    color: #9ca3af;
    font-size: .85rem;
    text-align: center;
    padding: 1rem;
}


/* --- Seitenspalte ------------------------------------------ */

.cq-obj-spalte {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cq-obj-box {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    padding: 1rem;
}

.cq-obj-box h2 {
    font-size: .95rem;
    font-weight: 600;
    color: #111827;
    margin: 0 0 .6rem;
}

/* Verfuegbarkeit mit Ampelpunkt - dasselbe Muster wie der
   Automatenstatus, damit die Plattform sich einheitlich anfuehlt. */
.cq-obj-ampel {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 600;
    color: #1f2937;
}

.cq-obj-punkt {
    width: .7rem;
    height: .7rem;
    border-radius: 9999px;
    flex: 0 0 auto;
}

.cq-obj-punkt--ja   { background: #22c55e; }
.cq-obj-punkt--nein { background: #ef4444; }

.cq-obj-box p {
    margin: .5rem 0 0;
    font-size: .875rem;
    color: #4b5563;
}

.cq-obj-knopf {
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: .55rem .9rem;
    border-radius: .5rem;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}

.cq-obj-knopf--primaer { background: #1d4ed8; color: #fff; }
.cq-obj-knopf--primaer:hover { background: #1e40af; }

.cq-obj-knopf--sanft {
    background: #fff;
    color: #374151;
    border-color: #d1d5db;
}
.cq-obj-knopf--sanft:hover { background: #f3f4f6; }


/* --- Abschnitte unterhalb ---------------------------------- */

.cq-obj-abschnitt {
    margin-top: 2.25rem;
}

/* Die Seitenspalte springt per #bezugsquellen / #exemplare hierher -
   ohne Versatz verschwindet die Ueberschrift unter dem Sticky-Header. */
.cq-obj-abschnitt[id] {
    scroll-margin-top: 5rem;
}

.cq-obj-abschnitt > h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 .25rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #e5e7eb;
}

.cq-obj-abschnitt > p.cq-obj-hinweis-text {
    font-size: .875rem;
    color: #6b7280;
    margin: .6rem 0 0;
}


/* --- Katalogdaten ------------------------------------------ */

.cq-obj-spec {
    margin: .75rem 0 0;
}

/* Label und Wert dicht beieinander in zwei Spalten.
   Vorher standen sie mit space-between an den Aussenkanten - bei einer
   breiten Spalte klaffte zwischen "Land" und "Deutschland" die halbe
   Seite, und das Auge musste die Zeile absuchen. Eine feste Labelspalte
   bindet beides zusammen und laesst die Werte untereinander fluchten. */
.cq-obj-spec > div {
    display: grid;
    grid-template-columns: 11rem minmax(0, 1fr);
    gap: .25rem 1rem;
    padding: .5rem .25rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: .95rem;
}

.cq-obj-spec > div:last-child { border-bottom: 0; }

.cq-obj-spec dt { color: #6b7280; }
.cq-obj-spec dd { margin: 0; color: #111827; overflow-wrap: anywhere; }

/* Auf schmalen Schirmen untereinander statt zweispaltig gequetscht. */
@media (max-width: 420px) {
    .cq-obj-spec > div { grid-template-columns: 1fr; }
    .cq-obj-spec dt { font-size: .8rem; }
}

/* Direkt unter den Bildern: kein zusaetzlicher Abstand nach oben. */
.cq-obj-abschnitt--eng {
    margin-top: 1.25rem;
}


/* --- Weitere Ausgaben desselben Motivs (Karten) ------------- */

.cq-obj-karten {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: .9rem;
    margin-top: .9rem;
}

.cq-obj-karte {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    overflow: hidden;
    background: #fff;
    transition: box-shadow .12s, border-color .12s;
}

.cq-obj-karte:hover {
    border-color: #c7d2fe;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .07);
}

.cq-obj-karte-bild {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 3 / 2;
    background: #f9fafb;
    padding: .5rem;
}

.cq-obj-karte-bild img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cq-obj-karte-text {
    padding: .5rem .6rem .6rem;
}

.cq-obj-karte-text strong {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.cq-obj-karte-text span {
    display: block;
    font-size: .75rem;
    color: #6b7280;
    margin-top: .15rem;
}


/* --- Bezugsquellen als Zeilen ------------------------------- */

.cq-obj-quelle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    padding: .8rem .25rem;
    border-bottom: 1px solid #f3f4f6;
}

.cq-obj-quelle:last-child { border-bottom: 0; }

.cq-obj-quelle-haupt {
    flex: 1 1 14rem;
    min-width: 0;
}

/* Nur was ein href traegt, sieht auch nach Link aus. Vorher waren
   verlinkte und nicht verlinkte Quellen optisch identisch (dunkelgrau,
   ohne Unterstreichung) - der Automat auf der Karte wirkte dadurch
   unverlinkt, obwohl er es nie war. */
.cq-obj-quelle-haupt a[href],
.cq-obj-quelle-haupt strong {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cq-obj-quelle-haupt a[href] {
    color: #1d4ed8;
    text-decoration: none;
}

.cq-obj-quelle-haupt a[href]:hover {
    text-decoration: underline;
}

/* Ohne Ortsbezug gibt es keine Detailseite - dann ist es bewusst kein
   Link, sondern nur ein Name. */
.cq-obj-quelle-haupt strong {
    color: #1f2937;
    font-weight: 600;
}

.cq-obj-quelle-ort {
    display: block;
    font-size: .82rem;
    color: #6b7280;
    margin-top: .1rem;
}

.cq-obj-quelle-status {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}


/* --- Anzeigenplatz ------------------------------------------
   Die Anzeige selbst kommt aus includes/partner_recommendation_card.php
   und bringt ihr eigenes Design mit (assets/css/partner.css). Hier
   steht nur der Rahmen, damit sie in der Seitenspalte sitzt statt
   quer ueber die Seite zu laufen. */

/* Ueberschrift ueber mehreren Haendlern. Erscheint erst ab zwei Karten -
   bei einer waere sie eine Zeile ohne Information. */
.cq-obj-anzeige-titel {
    font-size: .95rem;
    font-weight: 600;
    color: #111827;
    margin: .25rem 0 -.25rem;
}

/* Mehrere Anzeigen stehen untereinander, nicht ineinander. */
.cq-obj-anzeige + .cq-obj-anzeige {
    margin-top: .75rem;
}

.cq-obj-anzeige .cq-partner-card {
    margin: 0;
}

.cq-obj-anzeige .cq-partner-hero {
    height: 150px;
}

/* Kennzeichnung, dass es sich um eine Vorschau handelt. Faellt mit
   der echten Anbindung ersatzlos weg. */
.cq-obj-anzeige-simuliert {
    margin-top: .5rem;
    font-size: .72rem;
    color: #9ca3af;
    text-align: center;
}


/* --- Rueckseiten-Auswahl beim Einreichen --------------------
   Bilder statt Codes: A, B und C unterscheiden sich sichtbar
   (Pont du Gard, Big Ben, Torre de Belem). Wer seinen Schein in
   der Hand haelt, erkennt die Rueckseite - den Buchstaben dazu
   kennt er nicht. */

.cq-sg-rueck {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.cq-sg-rueck label {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    width: 7.5rem;
    padding: .5rem;
    border: 2px solid #e5e7eb;
    border-radius: .6rem;
    background: #fff;
    cursor: pointer;
    text-align: center;
    transition: border-color .12s, background-color .12s;
}

.cq-sg-rueck label:hover {
    background: #f9fafb;
}

/* Die ausgewaehlte Karte traegt den Rahmen - das Radio selbst ist
   nur fuer Tastatur und Screenreader da. */
.cq-sg-rueck input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.cq-sg-rueck input:checked + .cq-sg-rueck-inhalt {
    color: #1d4ed8;
}

.cq-sg-rueck label:has(input:checked) {
    border-color: #1d4ed8;
    background: #eff6ff;
}

.cq-sg-rueck label:has(input:focus-visible) {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
}

.cq-sg-rueck-bild {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 3 / 2;
    background: #f3f4f6;
    border-radius: .35rem;
    overflow: hidden;
}

.cq-sg-rueck-bild img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Kein Bild hinterlegt: der Code muss reichen. Ehrlicher als ein
   leerer Kasten. */
.cq-sg-rueck-bild span {
    font-size: 1.1rem;
    font-weight: 700;
    color: #6b7280;
}

.cq-sg-rueck-inhalt {
    font-size: .8rem;
    line-height: 1.25;
    color: #374151;
}

.cq-sg-rueck-inhalt strong {
    display: block;
    font-weight: 600;
}


/* ============================================================
   Bezugsquelle: was gibt es hier?  (automat.php)
   ------------------------------------------------------------
   Eine Bezugsquelle fuehrt beliebige Sammelgebiete. Die Seite
   zeigt deshalb je Gebiet einen eigenen Block statt einer
   pauschalen "Motive"-Galerie: an einem Kombigeraet stuenden
   sonst Pressmuenzen und Scheine unkommentiert nebeneinander.

   Die Kachel ist bewusst dieselbe fuer alle Gebiete - nur das
   Ziel unterscheidet sich. Wo es Objektseiten gibt, fuehrt sie
   dorthin; wo das Bild der Datensatz ist (Pressmuenzen), oeffnet
   sie die Lightbox.
   ============================================================ */

.cq-bq-block {
    margin-top: 2rem;
}

.cq-bq-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .9rem;
}

.cq-bq-titel {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.cq-bq-anzahl {
    font-size: .8rem;
    font-weight: 500;
    color: #6b7280;
}

/* Ergaenzen-Knopf im Kopf jedes Blocks: kurzer Weg, ohne dass man
   ans Seitenende scrollen muss. */
.cq-bq-add {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: 1px solid #d1d5db;
    border-radius: 9999px;
    background: #fff;
    font-size: .8rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.cq-bq-add:hover {
    background: #f9fafb;
    border-color: #9ca3af;
}

.cq-bq-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1rem;
}

.cq-bq-karte {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: box-shadow .15s, transform .15s;
}

.cq-bq-karte:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.cq-bq-bild {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f3f4f6;
    overflow: hidden;
}

.cq-bq-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Zwei Seiten, eine Kachel.
   Souvenir Medaillen haben keine Objektseite mehr - die Kachel IST der
   Datensatz, und ein Objekt, das man nur von vorne sieht, ist damit halb
   erfasst. Nebeneinander statt untereinander, damit die Kachelhoehe im
   Raster gleich bleibt; object-fit: cover schneidet ohnehin zu. */
.cq-bq-bild--paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
}

/* Ohne Bild bleibt das Zeichen des Sammelgebiets. Ein leerer
   grauer Kasten sieht aus wie ein Ladefehler. */
.cq-bq-bild-leer {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: linear-gradient(135deg, #f9fafb, #e5e7eb);
}

/* Pressmuenzen tragen keine Katalogdaten - dort ist das Bild der
   ganze Datensatz und der Textteil entfaellt komplett. */
.cq-bq-inhalt {
    padding: .6rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex-grow: 1;
}

.cq-bq-name {
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25;
    color: #111827;
}

.cq-bq-nr {
    font-size: .75rem;
    color: #6b7280;
}

.cq-bq-mehr {
    margin-top: .35rem;
    font-size: .75rem;
    font-weight: 500;
    color: #4f46e5;
}

.cq-bq-karte a {
    text-decoration: none;
    color: inherit;
}

.cq-bq-karte a:hover .cq-bq-name {
    text-decoration: underline;
}

/* Zwei gleich breite Spalten statt flex: die Beschriftungen sind
   unterschiedlich lang ("Sammlung" vs. "Marktplatz"), und seit die
   Kacheln schmaler sind, ergab das sichtbar verschieden grosse Knoepfe -
   einer davon zweizeilig. Ein Raster macht sie unabhaengig vom Text
   gleich gross. Das <form> um den ersten Knopf ist selbst Rasterzelle,
   deshalb muss der Knopf darin auf volle Breite. */
/* auto-fit statt starrer 1fr 1fr: in einer schmalen Kachel bekamen beide
   Knoepfe die halbe Breite, egal wie lang ihre Beschriftung ist. Zusammen
   mit dem ellipsis unten wurde "Marktplatz" dort zu "M..". Jetzt rutscht
   der zweite Knopf in die naechste Zeile, statt seinen Text zu verlieren. */
.cq-bq-aktionen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    align-items: stretch;
    gap: .4rem;
    padding: .5rem;
    border-top: 1px solid #f3f4f6;
}

.cq-bq-aktionen form {
    display: block;
}

.cq-bq-aktionen button {
    width: 100%;
    height: 100%;
    padding: .3rem .25rem;
    font-size: .7rem;
    line-height: 1.2;
    /* Kein nowrap/ellipsis mehr: ein abgeschnittener Knopf sagt weniger
       als ein umgebrochener. Die Beschriftungen sind zwei Woerter kurz. */
    white-space: normal;
}

/* Leerer Block: nicht verstecken, sondern erklaeren. Ein Gebiet
   ohne Eintraege ist der haeufigste Startzustand und zugleich die
   beste Gelegenheit, jemanden zum Mitmachen zu bewegen. */
.cq-bq-leer {
    border: 1px dashed #d1d5db;
    border-radius: .6rem;
    background: #f9fafb;
    padding: 1.25rem;
    text-align: center;
    color: #6b7280;
    font-size: .9rem;
}

/* ===========================================================
   Mehrere Ausgaben je Einreichung (cq-sg-mehr*)
   -----------------------------------------------------------
   Bewusst hier und nicht in Tailwind-Klassen: assets/css/tailwind.css
   ist ein gepurgter Build und liegt nicht in Git - eine Klasse, die im
   letzten lokalen Build fehlte, gaebe auf DEV einen unsichtbaren Knopf
   ohne jede Fehlermeldung. Diese Datei liegt in Git und wird nicht
   gepurgt.
   =========================================================== */

.cq-sg-mehr-liste {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Die einzelne Zeile bekommt erst eine Kante, wenn es mehr als eine
   gibt - bei einer einzelnen waere der Rahmen ein Kasten im Kasten.
   Das Umschalten haengt an der sichtbaren Kopfzeile, die das Skript
   genau dann einblendet. */
.cq-sg-zeile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cq-sg-zeile:has(> [data-mehr-kopf]:not([hidden])) {
    border: 1px solid #e5e7eb;
    border-radius: .6rem;
    padding: .9rem;
    background: #fff;
}

.cq-sg-zeile-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: -.25rem;
}

.cq-sg-zeile-nr {
    font-weight: 600;
    font-size: .9rem;
    color: #374151;
}

/* Entfernen ist die seltenere und die verlustreichere Aktion: zurueckhaltend
   im Ruhezustand, eindeutig beim Hinschauen. */
.cq-sg-mehr-weg {
    background: none;
    border: 0;
    padding: .2rem .35rem;
    font-size: .8rem;
    color: #6b7280;
    cursor: pointer;
    text-decoration: underline;
}

.cq-sg-mehr-weg:hover,
.cq-sg-mehr-weg:focus-visible {
    color: #b91c1c;
}

.cq-sg-mehr-add {
    margin-top: .9rem;
    width: 100%;
    padding: .6rem .8rem;
    border: 1px dashed #9ca3af;
    border-radius: .6rem;
    background: #f9fafb;
    color: #374151;
    font-size: .875rem;
    font-weight: 600;
    cursor: pointer;
}

.cq-sg-mehr-add:hover,
.cq-sg-mehr-add:focus-visible {
    border-color: #2563eb;
    color: #1d4ed8;
    background: #eff6ff;
}

/* Erklaert die Grenze, statt den Knopf kommentarlos verschwinden zu
   lassen - sonst sucht der Nutzer den Fehler bei sich. */
.cq-sg-mehr-voll {
    margin-top: .75rem;
    font-size: .8rem;
    color: #6b7280;
}