/* ═══ UHU-CMS TourGuide v2 ═══════════════════════════════════ */

/* Bottom-Bar Tooltip (immer unten fixiert) */
.tg-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:9995;
  background:#fff;color:#1a2e5a;
  box-shadow:0 -4px 24px rgba(0,0,0,.25);
  border-top:3px solid #e8b84b;
  transform:translateY(100%);transition:transform .35s ease;
  max-height:55vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.tg-bar.visible{transform:translateY(0)}

.tg-bar-phase{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem 1rem;background:#f8f9fc;border-bottom:1px solid #e0e4ef;
  font-size:.72rem;
}
.tg-phase-badge{
  font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:.15rem .5rem;border-radius:4px;color:#fff;font-size:.65rem;
}
.tg-phase-badge.frontend{background:#2e7d32}
.tg-phase-badge.intern{background:#1565c0}
.tg-phase-badge.admin{background:#c62828}
.tg-bar-counter{color:#999;margin-left:auto}

.tg-bar-body{padding:.75rem 1rem}
.tg-bar-title{font-size:1rem;font-weight:700;margin-bottom:.35rem;color:#1a2e5a}
.tg-bar-text{font-size:.85rem;line-height:1.55;color:#444}
.tg-bar-text strong{color:#1a2e5a}
.tg-bar-text em{color:#b8860b;font-style:normal;font-weight:600}

.tg-bar-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:.5rem 1rem .75rem;gap:.5rem;
}
.tg-bar-dots{display:flex;gap:3px;flex-wrap:wrap;flex:1;min-width:0}
.tg-dot{width:7px;height:7px;border-radius:50%;background:#ddd;flex-shrink:0}
.tg-dot.active{background:#e8b84b}
.tg-dot.done{background:#4caf50}

.tg-bar-btns{display:flex;gap:.35rem;flex-shrink:0}
.tg-btn{
  padding:.45rem .9rem;border-radius:6px;font-size:.82rem;font-weight:600;
  cursor:pointer;border:none;font-family:inherit;transition:all .12s;
}
.tg-btn-next{background:#1a2e5a;color:#fff}.tg-btn-next:hover{background:#0d1f3c}
.tg-btn-prev{background:#e0e4ef;color:#1a2e5a}.tg-btn-prev:hover{background:#d0d4df}
.tg-btn-end{background:#4caf50;color:#fff}.tg-btn-end:hover{background:#388e3c}
.tg-btn-close{
  position:absolute;top:.4rem;right:.6rem;background:none;border:none;
  font-size:1.1rem;color:#bbb;cursor:pointer;padding:.2rem;line-height:1;z-index:2;
}
.tg-btn-close:hover{color:#c00}

/* Floating Start-Button (immer unten rechts) */
.tg-float{
  position:fixed;bottom:1.25rem;right:1.25rem;z-index:8000;
  background:linear-gradient(135deg,#1a2e5a,#243d73);color:#e8b84b;
  border:2px solid #e8b84b;border-radius:50px;padding:.6rem 1.1rem;
  font-size:.82rem;font-weight:700;cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,.3);
  display:flex;align-items:center;gap:.4rem;
  font-family:'Segoe UI',system-ui,sans-serif;text-decoration:none;
  transition:transform .2s,box-shadow .2s;
}
.tg-float:hover{transform:scale(1.05);box-shadow:0 6px 24px rgba(0,0,0,.4)}
.tg-float-icon{font-size:1.2rem}

/* Hero CTA */
.tg-hero-cta{
  background:rgba(232,184,75,.15)!important;border:2px solid #e8b84b!important;
  color:#e8b84b!important;font-weight:600;animation:tg-pulse 2s infinite;
}
@keyframes tg-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,184,75,.4)}
  50%{box-shadow:0 0 0 10px rgba(232,184,75,0)}
}

/* Dimmer (leichtes Overlay hinter der Bar) */
.tg-dimmer{
  position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:9990;
  transition:opacity .3s;
}

/* Loading */
.tg-loading{
  position:fixed;inset:0;z-index:9999;background:#1a2e5a;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1rem;color:#e8b84b;
}
.tg-loading-spinner{
  width:36px;height:36px;border:3px solid rgba(232,184,75,.2);
  border-top-color:#e8b84b;border-radius:50%;animation:tg-spin .8s linear infinite;
}
@keyframes tg-spin{to{transform:rotate(360deg)}}
.tg-loading-text{font-size:.85rem;font-weight:600}

/* Mobile fine-tuning */
@media(max-width:480px){
  .tg-bar-body{padding:.6rem .75rem}
  .tg-bar-title{font-size:.92rem}
  .tg-bar-text{font-size:.8rem}
  .tg-bar-footer{padding:.4rem .75rem .6rem}
  .tg-btn{padding:.4rem .7rem;font-size:.78rem}
  .tg-float{bottom:1rem;right:1rem;padding:.5rem .9rem;font-size:.78rem}
}