/* ==========================================================================
   FFF Bottom-Bar & Quicknav — Mobile Only
   Fixe Quicknav (58px), keine Scroll-Sprünge, farbige Icons
   ========================================================================== */

/* Desktop ausblenden */
#fff-bottom-ui { display: none !important; }

/* ----------------------------------------------------------
   Mobile aktiv
---------------------------------------------------------- */
@media (max-width: 921px) {

  :root{
    --fff-quicknav-h: 58px;                 /* FIXE Höhe: kein Springen */
    --fff-handle-expose: 24px;              /* sichtbarer Griffkörper */
    --fff-exposed-when-closed: 14px;        /* nur Griff sichtbar */
  }

  /* Root */
  #fff-bottom-ui{
    display:block !important;
    position:fixed; left:0; right:0; bottom:0;
    z-index:99970;
    pointer-events:none;
    color:#0f1e2e;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,"Inter",sans-serif;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* Topleisten mobil ausblenden */
  .topbar, .show_upper_topbar{ display:none !important; }

  /* -------------------- QUICKNAV (fix, springt nicht) -------------------- */
  #fff-bottom-ui .fff-quicknav{
  position:fixed; left:0; right:0; bottom:0;

  height:58px;                 /* fix */
  padding:0 .6rem; margin:0; border:0;

  display:grid; grid-template-columns:repeat(4,1fr);
  place-items:center;
  gap:.18rem .22rem;

  background:#fff;
  border-top:1px solid rgba(15,23,42,.06);
  box-shadow:0 -6px 16px rgba(15,23,42,.06);
  z-index:99994;
  pointer-events:auto;

  overflow:hidden;
  backface-visibility:hidden;
  -webkit-text-size-adjust:100%;
  contain:layout paint style;
  isolation:isolate;           /* eigener Stacking-Context */
  -webkit-transform:translateZ(0);  /* Safari: Compositor fix */
}

/* Safe-Area Overlay AUSSCHALTEN (verursachte den Greyspace) */
#fff-bottom-ui .fff-quicknav::after{
  content:none !important;
}

/* KPI/Icons im Quicknav – (nur falls du diesen Block schon drin hast, so lassen) */
#fff-bottom-ui .fff-quicknav a.q{
  --q-color:#334155; --q-active:#1e3a8a;
  color:var(--q-color);
  text-decoration:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; padding:0; margin:0;
  font-size:.84rem; line-height:1;
  font-weight:600; letter-spacing:0;
  position:relative; transition:color .18s ease;
  white-space:nowrap;
}
  #fff-bottom-ui .fff-quicknav a.q:hover{ color:#1f2a44; }

  /* Icons (fixe Größe, kein Springen) */
  #fff-bottom-ui .fff-quicknav a.q i[data-lucide],
  #fff-bottom-ui .fff-quicknav a.q svg{
    width:24px; height:24px;
    stroke:currentColor; stroke-width:1.6; fill:none;
    stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke;
    opacity:.95; line-height:1; display:block; vertical-align:middle;
  }
  #fff-bottom-ui .fff-quicknav a.q.is-active{ color:var(--q-active); }
  #fff-bottom-ui .fff-quicknav a.q.is-active::before{
    content:""; position:absolute; top:.08rem; left:50%;
    width:22px; height:3px; transform:translateX(-50%);
    background:var(--q-active); border-radius:999px;
    box-shadow:0 1px 3px rgba(30,64,175,.3);
    pointer-events:none;
  }
  #fff-bottom-ui .fff-quicknav a.q:not(.is-active):hover::before{
    content:""; position:absolute; top:.12rem; left:50%;
    width:18px; height:2px; transform:translateX(-50%);
    background:rgba(51,65,85,.22); border-radius:999px;
    pointer-events:none;
  }

  /* -------------------- WEATHER-BAR -------------------- */
  #fff-bottom-ui .fff-bottombar{
  position:fixed; left:8px; right:8px;
  bottom:58px;                                /* exakt Quicknav-Höhe */
  background:#fff; color:#0f1e2e;
  border:1px solid rgba(15,23,42,.06);
  border-top-left-radius:18px; border-top-right-radius:18px;
  box-shadow:0 14px 36px rgba(15,23,42,.14);
  transform:translateY(calc(100% - var(--fff-exposed-when-closed, 14px)));
  transition:transform .22s ease, box-shadow .22s ease;
  z-index:99980;                               /* unter Quicknav */
  pointer-events:none;
  overflow:hidden;
  transform-origin:bottom center;
  backface-visibility:hidden;
  will-change:transform;
}
#fff-bottom-ui .fff-bottombar[data-state="open"]{ transform:translateY(0); }

  /* Nur offen über Quicknav */
#fff-bottom-ui .fff-bottombar.is-over{ z-index:99996; pointer-events:auto; }
#fff-bottom-ui .fff-bottombar:not([data-state="open"]).is-over{
  z-index:99982 !important;
  pointer-events:none !important;
}

  /* Griff / Handle – nur der Balken sichtbar im Closed-State */
  #fff-bottom-ui .fff-handle{
    position:absolute; left:50%;
    top:calc(-1 * var(--fff-handle-expose));
    transform:translateX(-50%);
    width:140px; height:48px; background:transparent; border:0;
    cursor:pointer; z-index:99993; display:block; pointer-events:auto;
  }
  #fff-bottom-ui .fff-handle::before{
    content:""; position:absolute; left:50%; top:10px; transform:translateX(-50%);
    width:104px; height:22px; border-radius:999px;
    background:#BBBBBB;
    box-shadow:0 2px 6px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
  }
  #fff-bottom-ui .fff-handle .fff-handle-pill{
    position:absolute; left:50%; top:17px; transform:translateX(-50%);
    width:64px; height:6px; border-radius:999px;
    background:#BBBBBB;
    box-shadow:inset 0 -1px 0 rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.10);
    display:block;
  }

  /* -------------------- WEATHER-BAR INHALT -------------------- */
  #fff-bottom-ui .fff-bar-inner{ padding:1.05rem 1rem .9rem; }

  /* Zeile 1: TRA + ECET/BCMT (zentriert, Wrap) */
  #fff-bottom-ui .fff-row{
    display:flex; justify-content:center; align-items:center; flex-wrap:wrap;
    gap:.6rem .9rem; margin:0 .5rem .7rem;
  }

  /* Pills (pastelliger Hintergrund, dunkler Rand/Schrift, feine Typo) */
  #fff-bottom-ui .fff-pill{
    display:inline-flex; align-items:center; justify-content:center;
    padding:.38rem .74rem; min-height:32px; border-radius:999px;
    font-size:13.5px; font-weight:500; line-height:1.15; letter-spacing:.1px;
    border:1px solid currentColor; text-align:center; white-space:nowrap; max-width:100%;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 2px rgba(15,23,42,.05);
  }
  #fff-bottom-ui .fff-pill .v{ font-weight:400; }

  .pill--green  { color:hsl(142 50% 28%); background:hsl(142 55% 93%); }
  .pill--yellow { color:hsl(42 70% 32%);  background:hsl(47 95% 92%); }
  .pill--orange { color:hsl(24 80% 34%);  background:hsl(28 100% 93%); }
  .pill--red,
  .pill--tra-red{ color:hsl(356 70% 38%); background:hsl(0 85% 95%); }

  /* Zeile 2: KPIs */
  #fff-bottom-ui .fff-kpis{
    display:grid; grid-template-columns:repeat(4,1fr);
    align-items:center; gap:.24rem .2rem;
  }

  #fff-bottom-ui .fff-kpi{
    display:flex; flex-direction:column; align-items:center; gap:.06rem;
    text-align:center; font-weight:600;
  }

  /* KPI-Icons farbig */
  #fff-bottom-ui .fff-kpi i[data-lucide],
  #fff-bottom-ui .fff-kpi svg{
    width:20px; height:20px; stroke:currentColor; fill:none; opacity:.95;
    line-height:1; display:block; vertical-align:middle;
  }
  #fff-wind svg, #fff-wind i[data-lucide] { color:#2563eb; }
  #fff-gust svg, #fff-gust i[data-lucide] { color:#ef4444; }
  #fff-temp svg, #fff-temp i[data-lucide] { color:#ef4444; }
  #fff-bus  svg, #fff-bus  i[data-lucide] { color:#06b6d4; }

  /* Werte-Typo */
  #fff-bottom-ui .fff-kpi .v{
    font-size:14px; line-height:1.05; font-weight:600; letter-spacing:.1px;
  }
  #fff-bottom-ui .fff-kpi .s{
    margin-top:-.04rem; font-size:11.5px; color:#7a8696; letter-spacing:.08px;
  }

  /* Griff bleibt klickbar */
  #fff-bottom-ui .fff-bottombar .fff-handle{ pointer-events:auto; }
}

/* Sicherheit: keine globalen SVG-Regeln überschreiben */
svg:not(#fff-bottom-ui svg){ max-width:none; max-height:none; }