/* ==========================================================================
   globaloilshock.com — v2.0 Phase 3: Roter Faden + Fortschrittsbalken
   Sticky progress bar + bottom CTA nav across the 5-step user journey:
   Home -> Kalkulator -> Ergebnis -> Tipps -> Ratgeber
   ========================================================================== */

/* ---- Progress bar (sticky, under global header) ---------------------- */
.gos-journey-bar{
  position:sticky;
  top:0;
  left:0;
  right:0;
  height:3px;
  background:rgba(255,255,255,0.06);
  z-index:49;
  overflow:hidden;
  font-family:var(--ff-body, 'Inter', system-ui, sans-serif);
}
.gos-journey-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg,#f59e0b 0%,#f97316 100%);
  box-shadow:0 0 10px rgba(245,158,11,0.55);
  transition:width 500ms cubic-bezier(.2,.7,.3,1);
}

/* ---- Meta label (sticky, below progress bar) ------------------------- */
.gos-journey-meta{
  position:sticky;
  top:3px;
  left:0;
  right:0;
  background:rgba(12,19,32,0.92);
  backdrop-filter:saturate(160%) blur(8px);
  -webkit-backdrop-filter:saturate(160%) blur(8px);
  padding:6px 18px;
  font-size:12px;
  line-height:1.3;
  color:var(--muted,#7a8da6);
  border-bottom:1px solid var(--border,rgba(255,255,255,0.08));
  z-index:48;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.gos-journey-meta-label{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.gos-journey-meta-label b{
  color:var(--text,#eaf2ff);
  font-weight:600;
}
.gos-journey-meta-label .gos-journey-step-name{
  color:var(--amber,#f59e0b);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gos-journey-dots{
  display:flex;
  gap:4px;
  flex-shrink:0;
}
.gos-journey-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.15);
  transition:background 200ms ease, transform 200ms ease;
}
.gos-journey-dot.is-active{
  background:var(--amber,#f59e0b);
  transform:scale(1.4);
}
.gos-journey-dot.is-done{
  background:var(--ok,#10b981);
}

/* ---- Bottom CTA navigation ------------------------------------------ */
.gos-journey-cta{
  max-width:var(--container-narrow,820px);
  margin:48px auto 32px;
  padding:0 20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  font-family:var(--ff-body,'Inter',system-ui,sans-serif);
}
.gos-journey-cta.is-single{
  grid-template-columns:1fr;
  max-width:520px;
}
.gos-cta-card{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:16px 22px;
  background:var(--card,rgba(21,31,48,0.72));
  border:1px solid var(--border,rgba(255,255,255,0.08));
  border-radius:var(--radius,14px);
  text-decoration:none;
  color:var(--text,#eaf2ff);
  transition:all 220ms cubic-bezier(.2,.7,.3,1);
  min-height:68px;
  cursor:pointer;
  font:inherit;
  text-align:left;
  width:100%;
}
.gos-cta-card:hover,
.gos-cta-card:focus-visible{
  border-color:var(--amber,#f59e0b);
  background:var(--bg-3,#1b2740);
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,0.35);
  outline:none;
}
.gos-cta-kicker{
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted,#7a8da6);
  font-weight:600;
}
.gos-cta-title{
  font-size:16px;
  font-weight:600;
  color:var(--text,#eaf2ff);
  line-height:1.35;
}
.gos-cta-next{
  text-align:right;
  background:linear-gradient(135deg, rgba(245,158,11,0.08) 0%, rgba(249,115,22,0.04) 100%);
  border-color:rgba(245,158,11,0.25);
}
.gos-cta-next .gos-cta-title{color:var(--amber,#f59e0b)}
.gos-cta-next:hover{
  background:linear-gradient(135deg, rgba(245,158,11,0.18) 0%, rgba(249,115,22,0.10) 100%);
}

/* ---- Mobile ---------------------------------------------------------- */
@media (max-width:720px){
  .gos-journey-meta{padding:5px 14px; font-size:11px;}
  .gos-journey-meta-label{gap:6px;}
  .gos-journey-cta{grid-template-columns:1fr; margin:32px auto 24px;}
  .gos-cta-next{text-align:left;}
  .gos-cta-card{padding:14px 18px; min-height:62px;}
  .gos-cta-title{font-size:15px;}
}

@media (max-width:420px){
  .gos-journey-dots{display:none;}
}

/* ---- Reduced motion -------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .gos-journey-fill, .gos-cta-card, .gos-journey-dot{transition:none !important;}
  .gos-cta-card:hover{transform:none;}
}

/* v2.0 Design-Phase-3+4 Journey START */
.gos-journey-bar {
  font-family: var(--font-mono);
}
.gos-journey-fill {
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-warning) 100%);
}
/* v2.0 Design-Phase-3+4 Journey END */

/* ============================================================
   Welle-5-Fix (2026-05-05) — Journey-Bar + Meta-Label nach UNTEN
   User-Direktive: „der fortschritt der oben unter dem menü
   angezeigt wird bitte nach unten zu dem fortschrittsbalken"
   ============================================================ */
.gos-journey-bar {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 49 !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,.4) !important;
}
.gos-journey-meta {
  position: fixed !important;
  top: auto !important;
  bottom: 3px !important;        /* direkt über dem Bar */
  left: 0 !important;
  right: 0 !important;
  z-index: 48 !important;
  border-top: 1px solid var(--border, rgba(255,255,255,0.08)) !important;
  border-bottom: none !important;
  box-shadow: 0 -2px 10px rgba(0,0,0,.3) !important;
}
/* Body-Spacing damit Content nicht von der unteren Bar verdeckt wird */
body {
  padding-bottom: max(env(safe-area-inset-bottom, 0px), 50px) !important;
}
/* Mobile (≤768px): kompaktere Höhe für Mobile-Daumenzone */
@media (max-width: 768px) {
  .gos-journey-meta {
    padding: 4px 12px !important;
    font-size: 10px !important;
  }
  body {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 44px) !important;
  }
}