/* Immer eigene Zeile & volle Breite – egal ob Parent Grid/Flex/Float */
#pi-ambient-wrap{
  display:block !important;
  width:100% !important;
  clear:both !important;
  margin-top:24px !important;
  grid-column:1 / -1 !important;   /* bei CSS Grid ganze Zeile */
  flex:0 0 100% !important;        /* bei Flex volle Zeile   */
  order:9999 !important;           /* falls Reihenfolge relevant */
}

/* Innen auf deine Seitenbreite begrenzen – erbt dein Design */
#pi-ambient-wrap .inner{
  max-width:var(--content-max, 980px);
  margin:0 auto;
  padding:0 16px;
}

/* Card – unaufdringlich, erbt Farben/Fonts */
#pi-ambient{
  color:inherit; font:inherit;
  background:var(--card, transparent);
  border:1px solid var(--accent-soft, rgba(127,127,127,.25));
  border-radius:var(--radius-xl, 1rem);
  box-shadow:var(--shadow-soft, none);
  padding:16px; width:100%;
  display:grid; grid-template-columns:110px 1fr; gap:14px; align-items:center;
}

/* Ring + Text */
#pi-ambient .ring{
  width:110px;height:110px;border-radius:50%;
  display:grid;place-items:center;
  background:conic-gradient(var(--pa-col,#22c55e) var(--pct,0deg), currentColor 0);
  border:2px solid rgba(0,0,0,.08);
  transition:background .25s ease;
}
@media (prefers-color-scheme: dark){
  #pi-ambient .ring{ border-color:rgba(255,255,255,.08); }
}
#pi-ambient .ring>span{font-weight:700;font-size:1rem}
#pi-ambient .rows{display:grid;gap:6px;font-size:.95rem;line-height:1.25}
#pi-ambient .label{opacity:.8;margin-right:6px}
#pi-ambient .value{font-weight:600}

/* Mobile */
@media (max-width:640px){
  #pi-ambient{grid-template-columns:1fr;text-align:center}
  #pi-ambient .rows{justify-items:center}
}