/* ============================================================
   Homepage Custom CSS v3 — "Ruhe" (calm dark glass)
   Vorgänger (Einsatzleitstand-Rot): custom.css.bak-ember
   ============================================================ */

:root {
  --accent:     #38bdf8;
  --accent-dim: rgba(56, 189, 248, 0.30);
  --panel-bg:   rgba(15, 18, 25, 0.66);
  --panel-brd:  rgba(255, 255, 255, 0.06);
  --text-hi:    #e8eaf0;
  --text-mid:   #9aa1ad;
}


/* ---------- Cards ---------- */
.services-group .service-card,
.services-group .service,
#information-widgets > div,
.bookmark {
  background: var(--panel-bg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--panel-brd) !important;
  border-radius: 12px !important;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.services-group .service-card:hover,
.bookmark:hover {
  border-color: var(--accent-dim) !important;
  background: rgba(20, 24, 33, 0.75) !important;
}

/* ---------- Status dots ---------- */
[class*="statusLabel"],
[class*="StatusLabel"] { display: none !important; }
.status-dot, [class*="status"][class*="dot"] {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
}

/* ---------- Gruppen-Titel: dezent statt taktisch ---------- */
.services-group > h2, h2 {
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  color: var(--text-mid) !important;
}

/* ---------- Text ---------- */
.service-name, .bookmark-text-name, .service-title {
  color: var(--text-hi) !important;
  font-weight: 600 !important;
}
.service-description {
  color: var(--text-mid) !important;
  font-size: 0.78rem !important;
}
.bookmark-text-description, .bookmark .description { display: none !important; }

/* ---------- Resource-Balken ---------- */
#information-widgets [class*="bg-theme"],
.resources [class*="bg-theme"],
.resources [role="progressbar"] {
  background-color: rgba(56, 189, 248, 0.6) !important;
}
#information-widgets [class*="bg-theme-300"],
#information-widgets [class*="bg-theme-200"],
.resources .bg-theme-300,
.resources .bg-theme-200 {
  background-color: rgba(255, 255, 255, 0.10) !important;
}

/* ---------- Info-Widgets lesbar ---------- */
#information-widgets svg { color: var(--text-hi) !important; fill: currentColor; }
#information-widgets *, #information-widgets span,
#information-widgets div, #information-widgets p {
  color: var(--text-hi) !important;
}
#information-widgets .label,
#information-widgets [class*="label" i] {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.65rem !important;
  color: var(--text-mid) !important;
}
#information-widgets .value {
  color: var(--text-hi) !important;
  font-weight: 600 !important;
}
#information-widgets [class*="text-theme"] { color: var(--accent) !important; }
#information-widgets { gap: 14px; }

/* ---------- Suche ---------- */
input[type="search"], input[type="text"] {
  background: rgba(12, 14, 19, 0.7) !important;
  border: 1px solid var(--panel-brd) !important;
  color: var(--text-hi) !important;
}
input[type="search"]:focus {
  border-color: var(--accent-dim) !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ---------- Widget-Werte in Service-Karten ---------- */
.service .widget .label, .widget .label {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  font-size: 0.62rem !important;
  color: var(--text-mid) !important;
}
.service .widget .value, .widget .value {
  color: var(--text-hi) !important;
  font-weight: 600 !important;
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }