/* omc-mobile.css — gemeinsame Mobil-Verbesserungen fuer alle OMC-Bordfunk-Seiten.
   Wird in den <head> jeder View eingebunden (nach dem Inline-<style>, gewinnt also).
   Greift nur auf schmalen Schirmen; Desktop bleibt unangetastet. */
/* Menueleiste ueber ALLE Seiten fixiert (klebt oben beim Scrollen) */
header{ position:sticky !important; top:0; z-index:50; background:rgba(10,14,26,.96); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }

@media (max-width: 860px){
  /* Kopfzeile kompakter */
  header{ padding:10px 12px !important; }

  /* Die umbrechende Text-Navigation -> eine saubere, horizontal wischbare Leiste */
  header > nav{
    order:3; flex:1 1 100%; min-width:0;
    display:flex !important; gap:2px;
    overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap;
    scrollbar-width:none; -ms-overflow-style:none;
    margin:2px 0 0 !important;
  }
  header > nav::-webkit-scrollbar{ display:none; }
  header > nav a{ flex:none; margin:0 !important; padding:8px 12px !important; font-size:14px !important; }

  /* Inhalt: weniger Seitenrand, nichts laeuft ueber den Rand */
  main{ padding-left:12px !important; padding-right:12px !important; max-width:100% !important; }
  img, svg, canvas, video, iframe{ max-width:100%; }

  /* Breite Tabellen scrollen horizontal statt zu sprengen */
  table{ display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap; }

  /* Sehr breite feste Grids/KPI-Reihen umbrechen lassen (nur falls vorhanden) */
  .kpis{ grid-template-columns:repeat(2,1fr) !important; }

  /* Pilotenakte (GESUCHT-Plakat) mobil verkleinern, damit es sauber passt */
  .pa{ padding:22px 18px 26px !important; transform:none !important; }
  .pa h2.g{ font-size:60px !important; letter-spacing:2px !important; }
  .sub{ font-size:11.5px !important; letter-spacing:2px !important; }
  .mug{ gap:14px !important; }
  .mugbox{ width:118px !important; height:118px !important; }
  .mono{ font-size:56px !important; }
  .alias{ font-size:15px !important; }
  .name{ font-size:30px !important; }
  .bounty .val{ font-size:28px !important; }
  .akte{ font-size:15px !important; }
}

/* Sehr schmal (kleine iPhones): noch etwas enger */
@media (max-width: 420px){
  header h1{ font-size:14px !important; }
}

/* ===== OMC App-Shell (18.06.2026) — native Kopfleiste im App-Modus =====
   Aktiv nur, wenn omc-appbar.js die Klasse .omc-app auf <html> setzt (App vom
   Homescreen, aus der /app-Startseite heraus geoeffnet, oder ?app=1). Der normale
   Desktop-/Browser-Aufruf ohne diese Klasse bleibt voellig unveraendert. */
html.omc-app header{ display:none !important; }
.omc-appbar{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:8px;
  padding:calc(env(safe-area-inset-top, 0px) + 10px) 8px 10px;
  background:rgba(8,11,22,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-bottom:1px solid #23304c;
  font-family:-apple-system, system-ui, "Segoe UI", sans-serif;
}
.omc-appbar .omc-back,
.omc-appbar .omc-home{
  background:none; border:0; color:#5dcaa5; padding:4px 6px; cursor:pointer; flex:none;
  display:inline-flex; align-items:center; line-height:1; text-decoration:none;
}
.omc-appbar .omc-back:active,
.omc-appbar .omc-home:active{ opacity:.5; }
.omc-appbar .omc-title{
  flex:1; min-width:0; color:#e8eefc; font-size:17px; font-weight:600; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center;
}
