/* Der gemeinsame Fotoscreen aller PWAs mit eigenem Sucher.
 *
 * QUELLE: fitness/tools/_foto-screen/foto-screen.css
 * Diese Datei wird in die Apps KOPIERT, nicht verlinkt (gleiche Konvention wie
 * transkript/web/diktat.js). Aenderungen gehoeren zuerst hierher, danach in alle
 * Kopien. Welche Apps sie benutzen, steht in der README daneben.
 *
 * Setzt basis.css voraus (Huelle, Kopfzeile, Knoepfe, Platzhalter) und die Farbtoken
 * der App. Hier steht nur, was den Kamera-Bildschirm ausmacht.
 */

/* --- Sucher ----------------------------------------------------------------- */

.kameraseite { gap: 12px; overflow: hidden; }

.sucher {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
}

/* Absolut im Rahmen statt height:100%: eine Prozenthoehe gegen eine Flex-Hoehe
   lassen die Browser gern aus, dann haengt das Bild oben und darunter ist Schwarz. */
.sucher video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Kurze Rueckmeldung ueber dem Sucher, ohne dass das Bild verschwindet. */
.blitz {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.66);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

/* --- Leiste ----------------------------------------------------------------- */

/* Die Leiste ist IMMER das letzte Element der Seite und traegt die untere
   Safe-Area. Nichts darf darunter stehen: sonst rutscht der Ausloeser nach oben
   und sitzt in dieser App woanders als in den anderen. Zusaetzliche Zeilen einer
   App gehoeren UEBER die Leiste. */
.leiste {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  /* Die untere Safe-Area haengt hier, nicht am body: sonst zaehlt sie doppelt. */
  padding: 4px 0 calc(8px + var(--sicher-unten));
}

/* Links das Licht, mittig der Ausloeser, rechts die App-eigene Taste (oder nichts).
   Wo eine Stelle frei bleibt, steht ein Platzhalter: sonst waere der Ausloeser nicht
   mittig. */

.ausloeser {
  width: 74px;
  height: 74px;
  padding: 0;
  border-radius: 50%;
  border: 3px solid var(--akzent);
  background: transparent;
  display: grid;
  place-items: center;
}

.ausloeser span {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--akzent);
  display: block;
}

.ausloeser[disabled] span { background: var(--grau); }

/* Der Lichtknopf steht nur da, wenn das Geraet die Lampe wirklich anbietet. iOS
   meldet torch in der Regel nicht, dann bleibt links der Platzhalter. */
.licht.an {
  background: #f6c344;
  border-color: #f6c344;
  color: #3a2c05;
}