/* ==========================================================================
   sammlung.css - nur fuer die Sammlungsansicht (fcbdata/)

   Setzt fcb.css voraus und wird danach eingebunden. Spricht Elemente wie
   aside und main direkt an - deshalb gehoert diese Datei nicht in die Website.
   ========================================================================== */

/* ---------- Kopf: was nur die Sammlung dort hat ---------- */
.frauen{display:flex;align-items:center;gap:9px;padding:6px 14px 6px 8px;
        border:1px solid var(--linie);border-radius:999px;background:var(--flaeche);
        box-shadow:var(--schatten);color:var(--text);font-size:14px;font-weight:500;
        white-space:nowrap;transition:.12s}
.frauen:hover{border-color:var(--rot);box-shadow:var(--schatten-hoch);text-decoration:none;
              transform:translateY(-1px)}
.frauen img{height:38px;width:38px;display:block}
.schnellzugriff{display:flex;gap:7px;white-space:nowrap}
.menuknopf{display:none;border:1px solid var(--linie);background:var(--flaeche);
           border-radius:var(--radius);padding:9px 15px;font:inherit;font-size:15px;
           font-weight:500;cursor:pointer;box-shadow:var(--schatten)}
.menuknopf:active{transform:translateY(1px)}

.layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;
        max-width:1500px;margin:0 auto;padding:20px 16px}

/* ---------- Seitenleiste ---------- */
aside{position:sticky;top:100px;align-self:start;max-height:calc(100vh - 120px);
      overflow-y:auto;background:var(--flaeche);border:1px solid var(--linie);
      border-radius:var(--radius);padding:16px;box-shadow:var(--schatten)}
aside h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--grau);
         margin:20px 0 8px;font-weight:700}
aside h2:first-child{margin-top:0}
.nurschmal{display:none}
@media (max-width:860px){ .nurschmal{display:block} }

.kat-alle .chip{display:block;text-align:center}
.kat-alle{margin-bottom:7px}
.kat-paar{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px}
.kat-paar.einzeln{grid-template-columns:1fr}
.kat-paar .chip{text-align:center;padding-left:6px;padding-right:6px}

.suche{width:100%;padding:9px 11px;border:1px solid var(--linie);border-radius:var(--radius);
       font:inherit;font-size:14px;margin-bottom:8px;box-shadow:inset 0 1px 2px rgba(16,24,40,.05)}
.suche:focus{outline:2px solid var(--rot);outline-offset:-1px;border-color:var(--rot)}
.auswahl{max-height:432px;overflow-y:auto;border:1px solid var(--linie);
         border-radius:var(--radius);box-shadow:inset 0 1px 2px rgba(16,24,40,.05)}
.auswahl a{display:block;padding:7px 11px;font-size:14px;color:var(--text);
           border-bottom:1px solid var(--linie)}
.auswahl a:last-child{border-bottom:0}
.auswahl a:hover{background:var(--grund);text-decoration:none}
.auswahl a.aktiv{background:var(--rot);color:#fff;font-weight:600}

/* ---------- Karten ---------- */
main h2{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.unterzeile{margin:0 0 20px;color:var(--grau);font-size:14px}

.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}
@media(min-width:1000px){.raster{grid-template-columns:repeat(4,minmax(0,1fr))}}

.karte{background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;
       padding:12px;display:flex;flex-direction:column;gap:2px;position:relative;
       box-shadow:var(--schatten);transition:.12s}
.karte:hover{box-shadow:var(--schatten-hoch)}
.karte.gesucht{border-color:var(--rot);box-shadow:0 0 0 1px var(--rot),var(--schatten)}
.marke{position:absolute;top:6px;right:6px;z-index:3;background:var(--rot);color:#fff;
       font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;
       letter-spacing:.04em;box-shadow:0 1px 4px rgba(0,0,0,.3)}

/* Das Seitenverhaeltnis sitzt auf dem Rahmen, nicht auf dem Bild: der Platz ist
   vorab reserviert, das Bild behaelt trotzdem seine eigenen Proportionen. */
.bild{position:relative;margin:0 0 10px;display:flex;align-items:center;
      justify-content:center;background:var(--grund);border-radius:6px;overflow:hidden}
.bild img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.wenden{position:absolute;left:8px;bottom:8px;z-index:2;border:0;border-radius:999px;
        cursor:pointer;background:rgba(0,0,0,.66);color:#fff;font:inherit;font-size:12px;
        font-weight:500;padding:4px 11px;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.wenden:active{transform:translateY(1px)}
.wendezeichen{display:none;position:absolute;right:6px;bottom:6px;z-index:2;
              background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:1;
              padding:5px 7px;border-radius:999px}
@media (hover:hover) and (pointer:fine){
  .wenden{display:none}
  .wendezeichen{display:block}
}

.name{font-weight:700;font-size:15px}
.serie{font-size:14px}
.nummer{font-size:13px;font-weight:700}
.zusatz{font-size:13px;color:var(--grau)}
.memo{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--linie);
      font-size:13px;color:var(--grau);font-style:italic}
.leer{padding:40px 0;color:var(--grau)}

/* ---------- schmale Schirme ---------- */
@media (max-width:860px){
  .layout{grid-template-columns:minmax(0,1fr);padding:12px}
  .menuknopf{display:block}
  .schnellzugriff{display:none}   /* im Kopf ist auf dem Telefon kein Platz */
  .frauen span{display:none}
  .frauen{padding:5px}
  .frauen img{height:32px;width:32px}
  /* Aufgeklappt legt sich die Auswahl unter den Kopf ueber die Seite, statt
     oben am Seitenanfang aufzugehen - der liegt ja ausserhalb des Sichtbaren,
     sobald man gescrollt hat. Der Kopf hat die hoehere Ebene und bleibt oben
     stehen; --kopfhoehe haelt den Platz dafuer frei. */
  aside{position:fixed;top:0;left:0;right:0;bottom:0;height:100vh;height:100dvh;
        z-index:30;max-height:none;overflow-y:auto;-webkit-overflow-scrolling:touch;
        border-radius:0;border:0;
        padding-top:calc(var(--kopfhoehe, 64px) + 16px);
        box-shadow:0 10px 30px rgba(0,0,0,.25)}
  aside.zu{display:none}
  .raster{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}