/* Bilder an einer Fahrt - Darstellung fuer alle vier Ansichten.
 *
 * Die Farben kommen aus marke.css; hier steht nur, wie Bilder liegen. Bedienziele
 * sind mindestens 44 px hoch: ein Fahrer bedient das mit Handschuhen im Dunkeln.
 * Gezeichnet wird mit Kaesten - kein SVG-Namensraum, das ist Hausregel.
 */

.bildbereich { margin-top: 20px; }

.bildkopf { display: flex; align-items: baseline; gap: 8px; }
.bildkopf h3 { margin: 0; font-size: 1rem; }
.bildzahl { color: var(--lx-leise, #DADADA); font-variant-numeric: tabular-nums; }

.bildhinweis { color: var(--lx-leise, #DADADA); margin: 6px 0 12px; }

.bildliste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.bildkarte {
  margin: 0;
  background: var(--lx-flaeche2, #1F1F1F);
  border: 1px solid var(--lx-linie, #3A3129);
  overflow: hidden;
}

.bildkarte-bild {
  display: block;
  width: 100%;
  height: 120px;
  object-fit: cover;
  cursor: zoom-in;
  background: #000;
}

.bildkarte-fuss {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  font-size: .8rem;
}
.bildkarte-wer { font-weight: 600; }
.bildkarte-wann, .bildkarte-masse { color: var(--lx-leise, #DADADA); }
.bildkarte-hinweis { color: var(--lx-text, #FFF); }

.bildfreigabe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--lx-linie, #3A3129);
}
.bildfreigabe-wort { font-size: .78rem; color: var(--lx-leise, #DADADA); width: 100%; }
.bildfreigabe .marke-knopf {
  min-height: 34px;
  padding: 4px 10px;
  font-size: .8rem;
  background: transparent;
  border: 1px solid var(--lx-linie, #3A3129);
  color: var(--lx-leise, #DADADA);
  cursor: pointer;
}
/* Freigegeben heisst sichtbar anders - nicht nur ein anderer Grauton. */
.bildfreigabe .marke-knopf.an {
  background: var(--lx-primaer, #C59B6C);
  border-color: var(--lx-primaer, #C59B6C);
  color: #121212;
  font-weight: 600;
}

.bildsenden { margin-top: 8px; }

.bildknopf, .knopf-gross {
  min-height: 48px;
  padding: 12px 20px;
  font-size: 1rem;
}

.bildvorschau {
  margin-top: 12px;
  padding: 12px;
  background: var(--lx-flaeche2, #1F1F1F);
  border: 1px solid var(--lx-linie, #3A3129);
}
.bildvorschau-bild {
  display: block;
  max-width: 100%;
  max-height: 40vh;
  margin: 0 auto 10px;
  background: #000;
}
.bildziel { margin: 0 0 10px; color: var(--lx-leise, #DADADA); }
.bildvorschau-zeile { display: flex; flex-wrap: wrap; gap: 10px; }

.bildfortschritt {
  height: 6px;
  margin-top: 12px;
  background: var(--lx-linie, #3A3129);
}
.bildfortschritt-balken {
  height: 100%;
  width: 0;
  background: var(--lx-primaer, #C59B6C);
  transition: width .15s linear;
}
/* Unbestimmt, weil eine byte-genaue Anzeige den alten Anfrageweg des Browsers
 * braeuchte - den verbietet die Datenschutzregel des Hauses. Man sieht, DASS
 * gesendet wird; das ist ehrlicher als ein geschaetzter Prozentwert. */
.bildfortschritt-balken.laeuft {
  width: 40%;
  animation: bildlauf 1.1s ease-in-out infinite;
}
@keyframes bildlauf {
  0%   { margin-left: 0; }
  50%  { margin-left: 60%; }
  100% { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bildfortschritt-balken.laeuft { animation: none; width: 100%; opacity: .6; }
}

.bildmeldung { margin: 10px 0 0; }
.bildmeldung-schlecht { color: var(--lx-schlecht, #F08A90); }

.bildschicht {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px;
  background: rgba(0, 0, 0, .92);
}
.bildschicht-bild { max-width: 100%; max-height: 80vh; }
.bildschicht-zu { min-height: 48px; }

/* Auf dem Handy eine Spalte, und der Sendeknopf ueber die ganze Breite. */
@media (max-width: 480px) {
  .bildliste { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .bildkarte-bild { height: 100px; }
  .bildknopf { width: 100%; }
  .bildvorschau-zeile .knopf { flex: 1 1 140px; }
}

/* Ein Bild, das nicht kommt, soll als Luecke sichtbar sein - nicht als
 * leeres Kaestchen, das man fuer Absicht haelt. */
.bildkarte-bild.bildkarte-fehlt {
  background: var(--lx-flaeche, #161616);
  border: 1px dashed var(--lx-linie, #3A3129);
}