/* kameraflug.css: die Namenstafel ueber dem vorgestellten Wesen.
 *
 * Sie ist KEIN Untertitelband. Sie haengt an einem Punkt in der Welt,
 * wandert mit der Figur mit und verschwindet, sobald die Kamera
 * weiterfliegt. Darum sitzt sie auch nicht am Bildrand, sondern genau
 * dort, wo der Kopf ist, und hat unten einen kleinen Stiel, der auf ihn
 * zeigt.
 *
 * Positioniert wird ausschliesslich ueber transform aus kameraflug.js
 * (translate(-50%,-100%) plus Bildpunkte). Kein left und kein top: eine
 * Verschiebung ueber transform laeuft im Compositor und zwingt den
 * Browser nicht bei jedem Bild zu einem neuen Layout.
 *
 * Alles haengt an .kf-tafel. Solange die Regie nicht laeuft, gibt es
 * das Element nicht, und diese Datei kostet nichts. */

.kf-tafel {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 6;                 /* ueber dem 3D-Schirm (2), unter Hinweisen (7) */
  pointer-events: none;
  will-change: transform;
  padding: 5px 11px 6px;
  border-radius: 9px;
  text-align: center;
  white-space: nowrap;
  color: #fff;
  background: rgba(8, 13, 26, 0.74);
  border: 1px solid rgba(255, 216, 61, 0.44);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.42);
  font: 13px/1.25 system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Ohne die Verzoegerung springt die Tafel beim Wechsel des Wesens
     einmal quer durchs Bild. Mit ihr wird daraus ein Aufblenden. */
  animation: kf-auf 0.34s ease-out both;
}

.kf-tafel[hidden] { display: none; }

/* Solange die Regie fuehrt, zielt niemand. Das Fadenkreuz aus
   welt3d.css gehoert zum Laufen, nicht zum Zuschauen, und im
   Gesicht des vorgestellten Wesens hat es gar nichts verloren. */
body.kfflug.welt3dan::after { display: none; }

.kf-tafel b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #ffd83d;
}

.kf-tafel span {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.82);
}

/* Der Stiel. Ein gedrehtes Quadrat statt eines Bildes: zwei Zeilen CSS
   und es zeigt genau auf den Kopf, weil der Bezugspunkt der Tafel ihre
   Unterkante ist. */
.kf-tafel i {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  transform: rotate(45deg);
  background: rgba(8, 13, 26, 0.74);
  border-right: 1px solid rgba(255, 216, 61, 0.44);
  border-bottom: 1px solid rgba(255, 216, 61, 0.44);
}

@keyframes kf-auf {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Pergament: die Sendung "Die Erde atmet" laeuft auf hellem Grund, und
   eine schwarze Tafel waere dort ein Loch im Bild. */
body[data-theme="pergament"] .kf-tafel {
  color: #33240f;
  background: rgba(240, 229, 200, 0.88);
  border-color: rgba(88, 62, 28, 0.42);
  box-shadow: 0 3px 12px rgba(90, 70, 34, 0.24);
}
body[data-theme="pergament"] .kf-tafel b { color: #7a4a12; }
body[data-theme="pergament"] .kf-tafel span { color: rgba(51, 36, 15, 0.78); }
body[data-theme="pergament"] .kf-tafel i {
  background: rgba(240, 229, 200, 0.88);
  border-right-color: rgba(88, 62, 28, 0.42);
  border-bottom-color: rgba(88, 62, 28, 0.42);
}

/* Auf dem Telefon ist der Platz knapp. Die Tafel wird kleiner statt
   abgeschnitten, sonst deckt sie das halbe Dorf zu. */
@media (max-width: 720px), (pointer: coarse) {
  .kf-tafel { padding: 4px 8px 5px; font-size: 11px; border-radius: 7px; }
  .kf-tafel b { font-size: 12.5px; }
  .kf-tafel span { font-size: 10px; }
  .kf-tafel i { width: 7px; height: 7px; margin-left: -3.5px; bottom: -4px; }
}

/* Wer Bewegung ausgestellt hat, bekommt sie auch hier nicht. */
@media (prefers-reduced-motion: reduce) {
  .kf-tafel { animation: none; }
}