/* 3D-Ansicht eines Flugs. Eigene Seite, deshalb darf sie den ganzen
   Viewport nehmen — anders als das Dashboard, dessen Layout festliegt. */

.f3d-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

.f3d-main {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 12px 10px;
  gap: 8px;
}

/* touch-action: none, sonst scrollt das Handy die Seite statt zu drehen. */
#view3d {
  flex: 1;
  width: 100%;
  min-height: 0;
  display: block;
  touch-action: none;
  cursor: grab;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-1);
}

#view3d:active {
  cursor: grabbing;
}

.f3d-status {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  color: var(--fg-2);
  font-size: 13px;
  pointer-events: none;
}

.f3d-status:empty {
  display: none;
}

.f3d-schalter {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
}

/* Ausschnittswahl: zwei Regler nebeneinander. Bewusst zwei getrennte statt
   eines Doppelgriffs — letzteren gibt es in HTML nicht, und nachgebaut wäre
   er auf dem Handy schlechter zu treffen als zwei volle Schieber. */
.f3d-auswahl {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
}

.f3d-auswahl label {
  color: var(--fg-2);
  min-width: 2.2em;
}

.f3d-auswahl input[type="range"] {
  flex: 1 1 200px;
  min-width: 120px;
  accent-color: var(--accent);
}

.f3d-legende {
  margin: 0;
  font-size: 11px;
}

/* Live-Abzeichen im Kopf: der Punkt pulst, damit man ohne Hinsehen merkt,
   dass die Spur noch wächst. */
.f3d-live {
  color: #ef4444;
  animation: f3d-puls 2s ease-in-out infinite;
}

@keyframes f3d-puls {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .f3d-live { animation: none; }
}

.f3d-hinweis {
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  max-width: 70ch;
}

@media (max-width: 700px) {
  .f3d-main { padding: 6px 8px 8px; }
  .f3d-hinweis { font-size: 10px; }
}

/* ---- 3D als eingebettetes Widget (/embed3d) ---------------------------
   Kopfzeile, Schalter und Legende sind im Widget-Modus entfernt (siehe
   flight3d.js). Hier bleibt nur, die Zeichenfläche den Platz füllen zu
   lassen und den Fuß klein zu halten — die Quellenangabe MUSS sichtbar
   bleiben, sie ist Lizenzbedingung von Esri und OpenStreetMap. */
body.f3d-widget {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.f3d-widget .f3d-main {
  padding: 0;
  gap: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

body.f3d-widget #view3d {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 0;
  border: 0;
}

body.f3d-widget .f3d-hinweis {
  margin: 0;
  padding: 2px 8px 4px;
  font-size: 10px;
  line-height: 1.3;
  opacity: 0.7;
}

body.f3d-widget .f3d-widget-link {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 5;
  padding: 3px 8px;
  font-size: 12px;
  text-decoration: none;
  color: var(--fg-0);
  background: rgba(var(--glass-rgb), 0.9);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

body.f3d-widget .f3d-widget-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

body.f3d-widget .f3d-status {
  top: 40%;
}