/* ----- Block unsichtbar bis JS ihn einblendet (kein Flicker) ----- */
.kgv-bt-block{ display:none; }
.kgv-bt-block.kgv-bt-visible{ display:block; }

/* ----- Card-Look ----- */
.kgv-bt-block{
  --panel:#f1f2f3; --border:#e7ecf1; --shadow:0 12px 28px rgba(0,0,0,.08);
  --tx:#1b232b; --sub:#546371; --ok:#13a857; --bad:#b22222; --accent:#0b78ff;
  background: var(--panel); border:1px solid var(--border); border-radius:18px; 
  padding:14px; box-shadow:var(--shadow); position:relative;
}

/* ----- Header ----- */
.kgv-bt-header{ display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
.kgv-bt-title{ display:flex; align-items:center; gap:10px; }
.kgv-bt-chips{ display:flex; gap:8px; flex-wrap:wrap; }

/* Close (nur bis Reload) */
.kgv-bt-hide-now{
  position:absolute; top:8px; right:10px; width:28px; height:28px; border-radius:8px;
  border:1px solid #bdc3c7; background:#fff; color:#455; cursor:pointer;
  font-size:18px; line-height:24px; padding:0; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.kgv-bt-hide-now:hover{ background:#f7fafc; }

/* Live-Elemente */
.kgv-bt-live-dot, .kgv-bt-banner{ display:none; }
.kgv-bt-live-dot{ width:10px;height:10px;border-radius:50%; background:#ff3b30;
  box-shadow:0 0 0 0 rgba(255,59,48,.6); animation:kgvbt-pulse 1.6s infinite; }
@keyframes kgvbt-pulse{0%{box-shadow:0 0 0 0 rgba(255,59,48,.5)}70%{box-shadow:0 0 0 14px rgba(255,59,48,0)}100%{box-shadow:0 0 0 0 rgba(255,59,48,0)}}
.kgv-bt-banner{
  background:linear-gradient(135deg, #16b15f, #0a9250); color:#fff; padding:5px 12px;
  border-radius:999px; font:800 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.25px; box-shadow:0 6px 16px rgba(22,177,95,.25);
}

/* Chips */
.kgv-chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px;
  background:#f6f9fc; color:#2a3440; border:1px solid #e8eef5; font:600 12px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif }
.kgv-chip-start::before{ content:"⏱️"; }
.kgv-chip-runtime::before{ content:"⏳"; }
.kgv-chip-zone::before{ content:"📍"; }
.kgv-bt-zone-out{ color:#b22222; font-weight:800 }

/* Karten */
#kgv-bt-map, #kgv-bt-map-track{
  height:480px; border-radius:16px; overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06); border:1px solid var(--border);
}

/* End-Box */
.kgv-bt-ended{ display:none; padding:12px 14px; border:1px dashed #cfd9e3; border-radius:12px;
  background:#f7fbff; color:#1b232b; margin-top:12px; font-weight:600; }
.kgv-ended-text{ margin-bottom:6px; }
.kgv-ended-meta{ color:#546371; font-weight:600; }

/* Tracker */
.kgv-bt-tracker .button{margin-right:8px}
.kgv-bt-statusline{margin:10px 0;color:#546371;display:flex;align-items:center;gap:10px;font-weight:600; min-height:18px;}
.kgv-live-anim{ width:18px;height:10px;display:inline-block; vertical-align:middle; position:relative; }
.kgv-live-anim::before, .kgv-live-anim::after{
  content:""; position:absolute; top:0; bottom:0; width:3px; border-radius:2px; background:#0b78ff; animation:kgvbar 1s infinite ease-in-out;
}
.kgv-live-anim::before{ left:0; animation-delay:0s; }
.kgv-live-anim::after{ left:6px; animation-delay:.2s; }
@keyframes kgvbar{ 0%,100%{height:10px} 50%{height:2px; transform:translateY(4px)} }

/* Mobile */
@media (max-width: 640px){
  #kgv-bt-map, #kgv-bt-map-track{ height: min(65vh, 460px); }
  .kgv-bt-block{ padding:12px; border-radius:16px; }
  .kgv-bt-banner{ padding:4px 10px; }
}