/* Ergaenzungen fuer das Medienarchiv.
   Bedient sich ausschliesslich der Farben und Formen, die seite.css
   (aus header.php) schon verwendet: #007bff fuer Verweise, #f2f2f2 als
   Kopfzeilenton, #ccc fuer Linien. Nichts Neues erfinden — die Seite
   soll aus einem Guss wirken, solange PHP- und FastAPI-Seiten
   nebeneinander laufen. */

/* --- Suchleiste --- */
.suchleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.suchleiste input[type="search"] {
    flex: 1 1 260px;
    padding: 7px 10px;
    font-size: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.suchleiste select {
    padding: 7px 8px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}
.suchleiste button {
    padding: 7px 16px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    background: #007bff;
    border: 1px solid #0069d9;
    border-radius: 4px;
    cursor: pointer;
}
.suchleiste button:hover { background: #0056b3; }

.trefferzahl {
    color: #666;
    font-size: 14px;
    margin: 0 0 14px;
}

/* --- Trefferliste --- */
.treffer {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}
.treffer li {
    display: block;
    margin: 0;
    font-size: inherit;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}
.treffer li:last-child { border-bottom: none; }

.treffer-titel {
    font-size: 16px;
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
}
.treffer-titel:hover { color: #0056b3; }

.treffer-zeile {
    font-size: 13px;
    color: #666;
    margin-top: 3px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    align-items: center;
}
.treffer-anriss {
    font-size: 14px;
    color: #333;
    margin-top: 5px;
    line-height: 1.45;
}

/* --- Statuspunkt der Quelleneinstufung (Farbcode wie assets/index.php) --- */
.punkt {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: -1px;
}

.marke {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 12px;
    border: 1px solid #ccc;
    background: #f7f7f7;
    color: #444;
}
.marke.intern   { background: #fff4e5; border-color: #ffcc80; color: #8a5300; }
.marke.gesperrt { background: #fdecea; border-color: #f5aca6; color: #97231a; }
.marke.personen { background: #e8f1fb; border-color: #a9c9ee; color: #17457c; }

/* --- Werkseite --- */
.werk-kopf { margin-bottom: 18px; }
.werk-kopf h1 { font-size: 22px; margin: 0 0 6px; }

.angaben {
    width: 100%;
    margin: 14px 0 22px;
}
.angaben th {
    width: 190px;
    background: #f2f2f2;
    font-weight: bold;
    vertical-align: top;
}

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 12px 0 20px;
}
.galerie a {
    display: block;
    border: 1px solid #ccc;
    background: #fafafa;
    padding: 4px;
    text-align: center;
    font-size: 12px;
    color: #666;
    text-decoration: none;
}
.galerie a:hover { border-color: #007bff; }
.galerie img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    margin: 0 0 3px;
    cursor: pointer;
}

.personenliste { list-style: none; padding: 0; text-align: left; }
.personenliste li {
    display: block;
    margin: 0 0 6px;
    font-size: 15px;
}

.blaettern {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    font-size: 14px;
}

.hinweis {
    background: #fff8e1;
    border: 1px solid #ffe082;
    padding: 10px 12px;
    margin: 0 0 16px;
    font-size: 14px;
}

/* --- Vorschaubilder --------------------------------------------------
   Die Trefferliste zeigt links eine Kachel. Feste Hoehe, damit die
   Zeilen gleich hoch bleiben, egal ob dahinter ein hochkantes Blatt,
   eine breite Wellenform oder ein quadratisches Foto steckt. */
.treffer li {
    display: flex;
    gap: 11px;
    align-items: flex-start;
}
.treffer-bild {
    flex: 0 0 54px;
    width: 54px;
    height: 70px;
    border: 1px solid #ccc;
    background: #fafafa;
    overflow: hidden;
    display: block;
}
.treffer-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    margin: 0;
    cursor: pointer;
}
.treffer-text { flex: 1 1 auto; min-width: 0; }

/* Wellenformen sind breit und flach — bei object-fit: cover bliebe von
   ihnen nur ein Ausschnitt der Mitte uebrig. */
.treffer-bild.breit img { object-fit: contain; object-position: center; }

@media (max-width: 560px) {
    .treffer-bild { flex-basis: 42px; width: 42px; height: 54px; }
}

/* Vorschau auf der Werkseite. Bewusst klein gehalten: sie ist ein
   Hinweis darauf, was einen erwartet, nicht der Inhalt selbst — der
   steht in der Datei, einen Klick weiter. Gross gesetzt schob sie
   Beschreibung und Personen unter den Seitenumbruch. */
.werk-vorschau {
    max-width: 200px;
    border: 1px solid #ccc;
    background: #fafafa;
    margin: 0 0 18px;
    display: block;
}
.werk-vorschau img { width: 100%; height: auto; display: block; margin: 0; }

/* Kachel in der Verwaltungsliste */
.werkliste .mini {
    width: 30px;
    height: 40px;
    object-fit: cover;
    object-position: top center;
    border: 1px solid #ddd;
    display: block;
    margin: 0;
    cursor: pointer;
}

/* --- Direktaufruf aus der Trefferliste -------------------------------
   Ohne diesen Knopf braucht es zwei Klicks bis zur Datei: erst die
   Werkseite, dort "öffnen". Wer nur nachschlagen will, will die Datei. */
.oeffnen {
    display: inline-block;
    font-size: 12px;
    line-height: 1.5;
    padding: 2px 9px;
    border: 1px solid #b9d3f0;
    border-radius: 11px;
    background: #eef4ff;
    color: #17457c;
    text-decoration: none;
    white-space: nowrap;
}
.oeffnen:hover { background: #dceaff; border-color: #8db6e5; color: #0d3562; }
.oeffnen .typ { font-weight: bold; letter-spacing: 0.03em; }
.oeffnen .gr { color: #5d7fa5; }

/* --- Aufklappbare Farblegende ----------------------------------------
   Form bewusst uebernommen vom Quellen-Aufklappfeld der
   Terminologieseite (.term-quelle): dieselbe Sache, dieselbe Gestalt. */
.farblegende {
    max-width: 900px;
    margin: 0 0 14px;
    text-align: left;
    font-size: 0.85em;
    color: #555;
}
.farblegende summary {
    cursor: pointer;
    color: #34618f;
    display: inline-block;
    padding: 2px 0;
}
.farblegende summary:hover { text-decoration: underline; }
.farblegende .inhalt {
    border-left: 3px solid #d7d7d7;
    padding: 8px 0 6px 12px;
    margin-top: 6px;
    line-height: 1.55;
}
/* Die Seiten-CSS formatiert ul/li fuer das Navigationsmenue (zentriert,
   inline-block, ohne Punkte). Hier zuruecksetzen, sonst steht die
   Legende in einer Zeile. */
.farblegende ul {
    list-style: none;
    text-align: left;
    margin: 0 0 8px;
    padding: 0;
}
.farblegende li {
    display: block;
    margin: 0 0 5px;
    font-size: inherit;
    text-align: left;
}
.farblegende p { margin: 0; }