/* =========================================================
   GTS Widget – Plot links + Info rechts (Joomla/Astroid)
   ========================================================= */

.gts-wrap{
  max-width: 1200px;
  margin: 0 auto 40px;
  padding: 0 10px;
  box-sizing: border-box;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.gts-card{
  background:#ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  padding: 20px 22px 18px;
  box-sizing: border-box;
}

/* ===== Header ===== */
.gts-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 16px;
  margin-bottom: 10px;
}

.gts-title{
  font-size: 22px;
  font-weight: 650;
  color:#111827;
  line-height:1.2;
}

.gts-stage{
  font-size: 14px;
  color:#6b7280;
  margin-top: 4px;
}

.gts-value{
  font-size: 44px;
  font-weight: 800;
  color:#111827;
  line-height: 1;
  text-align:right;
  white-space:nowrap;
}

.gts-unit{
  font-size: 16px;
  font-weight: 500;
  color:#6b7280;
  margin-left: 6px;
}

/* ===== 2-Spalten Layout ===== */
.gts-content{
  display:grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 10px;
}

.gts-plot-col{ min-width:0; }
.gts-info-col{ min-width:0; }

/* Plot Container */
.gts-plot{
  width:100%;
  height: 360px;
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
}

/* ===== Info Box ===== */
.gts-info{
  background:#ffffff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,.07);
  padding: 16px 16px 14px;
  border: 1px solid rgba(17,24,39,.06);
  box-sizing: border-box;
}

.gts-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.gts-label{
  font-size: 13px;
  color:#6b7280;
}

.gts-strong{
  font-size: 14px;
  font-weight: 650;
  color:#111827;
}

/* Split rows */
.gts-split{
  display:flex;
  justify-content:space-between;
  gap: 16px;
  margin: 12px 0;
}

/* ===== Progress ===== */
.gts-progress{
  width:100%;
  height: 10px;
  background:#e5e7eb;
  border-radius: 999px;
  overflow:hidden;
  margin-top: 8px;
}

.gts-bar{
  height:100%;
  width:0%;
  border-radius: 999px;
  transition: width .65s ease, opacity .25s ease;
}

/* Farben */
.gts-bar.blue   { background: linear-gradient(90deg,#60a5fa,#93c5fd); }
.gts-bar.green  { background: linear-gradient(90deg,#16a34a,#4ade80); }
.gts-bar.yellow { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
.gts-bar.red    { background: linear-gradient(90deg,#dc2626,#f87171); }

.gts-bar.minfill{
  width: 2% !important;
  opacity: .55;
}

.gts-hint{
  margin-top: 10px;
  font-size: 13px;
  color:#6b7280;
}

/* Trend */
.gts-trend{
  display:inline-block;
  width: 18px;
  text-align:center;
  font-weight: 800;
  margin-right: 6px;
}

.gts-trend.up{ color:#16a34a; }
.gts-trend.flat{ color:#6b7280; }
.gts-trend.down{ color:#dc2626; }

.gts-trendtext{
  margin-left: 6px;
  font-size: 13px;
  color:#6b7280;
}

/* Empfehlung */
.gts-rec{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(17,24,39,.14);
}

.gts-rec-text{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  color:#374151;
}

/* Warnung */
.gts-warn{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #92400e;
  font-size: 13px;
  line-height: 1.4;
}

.gts-warn.ok{
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}

/* Responsive */
@media (max-width: 980px){
  .gts-content{ grid-template-columns: 1fr; }
  .gts-plot{ height: 300px; }
}

@media (max-width: 600px){
  .gts-card{ padding: 16px; }
  .gts-value{ font-size: 34px; }
  .gts-title{ font-size: 19px; }
  .gts-plot{ height: 260px; }
}